CSS选择器(重点)

CSS选择器(重点)

1.标签选择器(元素选择器)

格式:     标签名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

缺点:无法差异化

2.类选择器

格式:     .类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}   //声明类样式

调用类样式  class="类名 "

CSS命名规则:

1.长词组可用-分割,以功能为类名  例:定义颜色 .c-orange {color:orange}

2.尽量不使用下划线

3.不使用数字,汉字

多类名选择器:

调用:class="类名 类名"  中间用空格隔开

3.ID选择器(类似于身份证号,是唯一的)

格式:    #id名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

调用  id="id名"   //只允许调用一次

4.通配符选择器

格式:    *{属性1:属性值1;属性2:属性值2;属性3:属性值3;}  *代表所有标签  //很少使用

5.伪类选择器

链接伪类选择器  链接未写可用#代替

顺序尽量不要颠倒  lv ha 

link{  } //未访问的链接    格式 a:link{}

visited{  } //已访问的链接  格式 a:visited{}  //不常用

hover{  } //鼠标移动到链接上  格式 a:hover{}

active{  } //选定的链接(点击链接未松开鼠标)  格式 a:active{}  //不常用

结构(位置)伪类选择器

x:first-child 选取其父元素的首个子元素的指定选择器

x:last-child  选取其父元素的最后一个子元素的指定选择器

x:nth-child()   匹配其父元素的第N个子元素 

()参数 

even 选择所有偶数的子元素

odd 选择所有奇数的子元素

n    选择所有元素  (可通过公式表达) 

2n  选择所有偶数的子元素

2n+1 选择所有奇数的子元素


x:nth-child(eveb)        正数,选择偶数元素

x:nth:last-child(even)  倒数 选择偶数元素

6.目标伪类选择器

:target  选取当前活动的目标元素

CSS复合选择器

1.交集选择器

第一个为标签选择器,第二个为class选择器

中间不可以有空格   以·相连 例 div.font-size (同时满足两个条件)

2.并集选择器

中间不可以有空格   以 , 相连      (同类属性 可一起设置 声明的类名也可以)

3.后代选择器(儿子 孙子 都可以)

外层标签写在前面,内层标签写后面 空格隔开

4.子元素选择器(只有亲儿子)

爸爸标签写在前面  亲儿子标签写在后面  >隔开

5.属性选择器

选取标签中带有某些特别属性的选择器 用[ ]隔开 

标签[属性]

标签[属性=参数]

标签[属性^=参数]    以参数开头的都被选取

 标签[属性$=参数]  以参数结尾的都被选取

 标签[属性*=参数]   任意位置

6.伪元素选择器

格式     

标签名::first-letter{}   选择第一个字

标签名::first-line{}   选择第一行

标签名::selection{}  选中

标签名::before{  content:"内容" }   在前面插入内容

标签名::after{   content:"内容" }    在后面插入内容

CSS书写规范

空格规范 

1.选择器 { }之间敲空格(div    {   })

2.属性名和之后的 : 之间不允许包含空格  :与属性值之间必须包含空格  (font-size:   12px)

3.当一个rule包含多个选择器时,每个选择器必须独占一行

格式如下:

.post,

.font-size,

.color{}

4.选择器的嵌套层应不大于3级,位置靠后的限定条件应尽可能准确

5.属性定义后用分号 ;   结尾

Chrome 调试开发者工具检查

F12 打开

左面为html代码,右面为css

ctrl+  +(加号)调节代码大小  ctrl +鼠标滚轮 调节工具台大小

调节页面字体大小,上下箭头,可测试字体大小 

发布了48 篇原创文章 · 获赞 3 · 访问量 900

猜你喜欢

转载自blog.csdn.net/procul/article/details/103108411