CSS选择器

class和id的使用场景

• class用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
• id多使用于主要块级元素，id一个页面中只能出现一次，有些独一无二元素也可用id。

---

CSS选择器常见的有几种

• 基础选择器

选择器	含义
*	通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
#id	id选择器，匹配特定id的元素
.class	类选择器，匹配class包含(不是等于)特定类的元素
element	标签选择器

• 组合选择器

选择器	含义
E,F	多元素选择器，用,分隔，同时匹配元素E或元素F
E F	后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F	子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
element#id	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

• 属性选择器

选择器	含义
E[attr]	匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value]	匹配属性attr值为value的元素，div[id=test],匹配id=test的div
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元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)	匹配不符合当前选择器的任何元素

• 伪元素选择器

选择器	含义
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

---

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

选择器的优先级从高到低分别是

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

复杂场景优先级计算规则是

1. 行内样式计数1000；
2. id选择器计数100；
3. 类、属性、伪类选择器计数10；
4. 标签、伪元素选择器计数1；
5. 通过以上计数计算选择前的优先级结果，数字越大优先级越高。

---

a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

a:link -> a:visited -> a:hover -> a:active

• 鼠标经过的“未访问链接”同时拥有a:link、a:hover、a:active三种属性，后面的属性会覆盖前面的属性定义，所以a:link必须放在a:hover的前面，a:hover必须放在a:active的前
• 鼠标经过的“已访问链接”同时拥有a:visited、a:hover、a:link三种属性，后面的属性会覆盖前面的属性定义，此时a:visted和a:link必须放在a:hover的前面

---

以下选择器分别是什么意思?

• #header id名为header的元素
• .header class名为header的元素
• .header .logo class名为header的元素下的class名为logo的子元素
• .header.mobile class名同时为header和mobile的元素
• .header p, .header h3 class名为header的元素下所有的p子元素和h3子元素
• #header .nav>li id名为header的元素下的所有class名为nav的子元素的直接子元素li
• #header a:hover id名为header的元素下的所有a标签在鼠标悬停时的状态
• #header .logo~p id名为header的元素下的class名为logo的元素及其后面的同级p元素
• #header input[type="text"] id名为header的元素下的所有type属性为text的input元素

---

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child 父元素下第一个子元素且其必须为div元素
• div:first-of-type 父元素下第一个div元素
• div :first-child div元素下的所有后代的第一个子元素
• div :first-of-type div元素下的所有后代中标签相同的第一个子元素

---

运行代码，解析下输出样式的原因。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p> // A
   <h3 class="item1">bb</h3> // B
   <h3 class="item1">ccc</h3> // C
 </div>

• A行作为.item1的父元素下的第一个子元素，文字颜色被改为红色；同时作为.item1的父元素下的第一个p元素，背景色改为蓝色。
• B行作为.item1的父元素下的第一个h3元素，背景色改为蓝色；但它不是其父元素的第一个子元素，文字颜色不变。
• C行既不是.item1的第一个子元素，也不是.item1的第一个h3元素，文字颜色和背景色都不变。