CSS选择器

1、class 和 id 的使用场景?

id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；

class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

基础选择器

选择器	定义
E,F	多元素选择器，用,分隔，同时匹配元素E或元素F
E F	后代选择器，用空格分隔，匹配E元素所有的后代元素F
E>F	子元素选择器，匹配E元素的所有直接元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器，匹配E元素之后的同级元素F(无论直接相邻与否)

选择器	定义
E[attr]	匹配所有具有属性attr的元素
E[attr=value]	匹配属性值为value的元素
E[attr~=value]	匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
E[attr^=value]	匹配属性attr的值以value开头的元素
E[attr$=value]	匹配属性attr的值以value结尾的元素
E[attr*=value]	匹配属性attr的值包含value的元素

选择器	定义
E:first-child	匹配元素E的第一个子元素
E:link	匹配素有未被点击的链接
E:visited	匹配所有已经被点击的链接
E:active	匹配鼠标已经在其上按下，但是还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的元素
E:enabled	匹配表单中可用的元素
Edisabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E:selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child	匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与nth-last-child作用相似，但是仅匹配使用同种标签的元素
E:first-child	匹配父元素的第一个子元素
E:last-child	匹配父元素的最后一个子元素
E:first-of-type	即 E:nth-of-type(1)
E:last-of-type	即 E:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素

在属性后面有!import的元素样式

根据组合选择器按照以下规则统计各类选择器的个数：
行内样式 --> 统计值为a
ID选择器 --> 统计值为b
类、属性选择器、伪类选择器 --> 统计为c
标签选择器、伪类选择器 --> 统计为d

先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级。

  
 
   aa
   bb
   ccc

Paste_Image.png