CSS选择器

1.class 和 id 的区别

id 定位到页面上唯一的元素，而class 定位到页面上有相同特征的一类元素。

2. CSS 常见的选择器种类

• 基础选择器

选择器	含义
*	通用选择器
#id	id选择器
.class	类选择器
element	标签选择器

• 组合选择器

选择器	含义
E, F	多元素选择器，匹配 E ，同时也匹配 F
E F	后代选择器，匹配 E 元素所有的 F 后代，不论嵌套多少层
E>F	直接后代选择器，匹配 E 元素的直接子元素中的 F 元素，子元素的后代元素不再做选择
E+F	直接相邻选择器，选中 E 后直接相邻的同级 F
E~F	普通相邻选择器，选中 E 后所有同级 F
EF	多条件选择器，连写 id 和 class 选择器，匹配 是 E 又是 F 的元素

• 属性选择器

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

• 伪类选择器

选择器	含义
E:first-child	匹配元素E的第一个子元素
E:link	匹配未被点击的链接
E:visited	匹配点击过的链接
E:active	匹配当前被鼠标点下未释放的元素
E:hover	匹配鼠标悬停其上的元素
E:focus	匹配当前获得焦点的元素
E:lang(c)	匹配lang属性值等于c的元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbook元素
E:selection	匹配当前用户选中的元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素
E:first-child	匹配父元素下第一个子元素

• 伪元素选择器

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

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

优先级从高到低如下：

1. 后面标有important的样式
2. 写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器默认

选择器的特殊性由选择器本身决定，出现冲突时，高特殊性的声明胜出。对于复杂场景，可以使用特殊值来计算优先级，特殊性值表述为4个部分：0，0，0，0，计算规则如下：

• ID —— +0，1，0，0
• 类、属性选择、伪类 —— +0，1，0，0
• 元素、伪元素 —— +0，0，0，1
• 所有内联属性 —— +1，0，0，0
  对于得到的值，相同位置上的数字越大的值代表的优先级越高；不同的位置按从前到后优先级依次降低，即 0，0，1，0 的优先级比 0，0，1，15 更高。

越是“特殊”的选择器优先级越高。具有相同优先级的选择器，如果样式出现冲突，那么后出现的样式会覆盖先出现的样式。

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

a:link → a:visited → a:hover → a:active
因为 a:visited 在链接访问过一次之后永久生效，如果放在最后会覆盖掉其他的样式，在链接访问过一次之后 a:hover 和 a:active 样式都会被覆盖，不再有本来的期望效果。

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

#header{
}/*id 为 header 元素*/
.header{
}/*有 header 类的所有元素*/
.header .logo{
}/*有 header 类的所有元素的后代中有 logo类的所有元素*/
.header.mobile{
}/*同时有 header 类和 mobile 类的所有元素*/
.header p, .header h3{
}/*有 header 类的所有元素的后代 p 元素，和有 header 类的所有元素的后代 h3 元素*/
#header .nav>li{
}/*id 为 header 的元素的有 nav 类的后代元素的直接 li 子元素*/
#header a:hover{
}/*id 为 header 的元素的子元素中，处于鼠标悬停状态的链接*/
#header .logo~p{
}/*id 为 header 的元素的子元素中，有 logo 类的元素的同级 p 元素*/
#header input[type="text"]{
}/*id 为 header 的元素的 input 子元素中type属性值为 text 的元素*/

6. div:first-child和div:first-of-type的作用和区别

div:first-child 匹配的是 div 的父元素下第一个子元素，而 div:first-of-type
匹配的是父元素下第一个子元素。例如：

<div class="father">
  <h1 id="child1">AA</h1>
  <h2 id="child2">BB</h1>
  <h3 id="child3">CC</h1>
  <h2 id="child4">DD</h1>
</div>

如果有选择器如下：
#child2:first-child，选中AA；
#child2:first-of-type，选中BB；
#child4:first-child，选中AA；
#child4:first-of-type，选中BB。

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

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

根据.item1:first-child伪元素选择器和.item1:first-of-type伪元素选择器的含义，对不同的元素，可以得到如下选择结果：

标签(元素内容)	.item1:first-child选中的元素	.item1:first-of-type选中的元素
p(aa)	p(aa)	p(aa)
h3(bb)	p(aa)	h3(bb)
h3(ccc)	p(aa)	h3(bb)