前端面试系列（4）——CSS选择器

这篇文章主要总结了 CSS 选择器的相关知识，CSS 的选择器是前端面试或者笔试中经常问到和用到的，同时对于开发来说也是必备基础知识

优先级

不同级别

级别依次递减：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为 style 属性写在元素内的样式（简称为“内联样式”）
id 选择器
类选择器
标签选择器
通配符选择器
浏览器自定义

另外，在《精彩绝伦的CSS》这本书中，作者用数字定量了选择器的优先级，具体规则为：

每个元素描述符贡献 0，0，0，1
每个类、伪类或者属性描述符贡献 0，0，1，0
每个 ID 描述符贡献 0，1，0，0
行内样式或内联样式贡献1 ，0，0，0

可能看到这里你还比较糊涂，那请看下面的图片：

其实就是简单的加法，数字越大优先级越高（为何如此计算尚不得知，仅作为额外知识），!important 会覆盖任何没有 !important 的属性

同一级别

同一级别中后写的会覆盖先写的样式

基础选择器

这几类是使用频率最高的几种，同时在各个版本的 reset.css 中也会经常出现

选择器	含义
*	通用元素选择器，匹配页面任何元素（使用频率较低）
#id	id 选择器，匹配特定 id 的元素
.class	类选择器，匹配 class 包含（不是等于）特定类的元素
element	标签选择器

组合选择器

这些选择器让我们的样式添加更加灵活，同时需要注意的是不只能写两层，理论上讲只要找得到可以写无限层，但是层数越多越影响性能，同时也会有优先级的麻烦，所以争取用最简短、最准确的选择器才是正道

选择器	含义
“E,F”	多元素选择器，用 “”,”” 分隔，同时匹配元素 E 或元素 F
“E F “	后代选择器，用空格分隔，匹配 E 元素所有的后代元素F
E>F	子元素选择器，用 “”>”” 分隔，匹配 E 元素的所有直接子元素 F
E+F	直接相邻选择器，匹配 E 元素之后的相邻的同级元素 F
E~F	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2	匹配类中既包含 class1 又包含 class2 的元素

属性选择器

这一类的选择器用的比较少，因为其实用性并不是很高，同时在性能方面也会比较差，所以可以作为了解，如果真需要用属性去选择的时候知道 CSS 有属性选择器就可以了

选择器	含义
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 开头的元素，主要用于 lang 属性，比如“en”、“en-us”
E[attr ^=value]	匹配属性 attr 的值以 value 开头的元素
E[attr $=value]	匹配属性 attr 的值以 value 结尾的元素
E[attr *=value]	匹配属性 attr 的值包含 value 的元素

伪类选择器

这一类选择器大部分都是 CSS3 新增类型，可以更方便、更快捷地匹配到目标元素，所以以下这些选择器很重要，需要牢牢记住

选择器	含义
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)	匹配不符合当前选择器的任何元素

伪元素选择器

不得不说，:before 和 :after 选择器好用到爆（谁用谁知道），在一些悬停动画、箭头绘制以及 clearfix 样式里会经常见到

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

总结

CSS 的选择器是基础中的基础，而有些选择器使用频率是比较低的，但是一定要知道 CSS 的选择器都有哪些，遇到新的需求时会少很多麻烦。同时，不要经常使用多层选择器，这会使页面渲染负担加重，影响性能。

总有人间一两风，填我十万八千梦