[CSS] 选择器梳理

选择器第一个要关注的点就是它们的优先级了：

从位置上来看：内嵌 > 内联 > 外联 、 重复时后写的会覆盖掉先写的

从选择器类型来看：

后面跟!important的属性 > id选择器 > （class、属性、伪类）选择器 > （标签、伪元素）选择器 > *通配符选择器 > 浏览器的自带的默认属性

另外选择器是可以组合的，如果在组合的过程中某个元素的样式属性出现了重复，我们就可以用求和的方式计算优先级，从而判断最终的结果样式。

组合的方式有以下几种：

（1）A和B并列

A,B 并列，则A,B共享定义的样式

.header , .sidebar {}

（2）得到A的指定子孙B

A B，仅B能用到这些样式，B可以是子孙节点的选择器

.header .sidebar {}

（3）得到A的指定子选择器B

A>B，仅B能用到这些样式，B只能是子结点的选择器

.header > .sidebar {}

（4）得到A的指定弟弟节点的选择器B

A~B，仅B可用到这些样式，B可以是任意弟弟节点的选择器

.header ~ .sidebar {}

（5）得到A的相邻弟弟节点的选择器B

A+B，仅B可用到这些样式，B只能是相邻的弟弟节点的选择器

.header + .sidebar {}

（6）得到同时具有两个class选择器的节点的临时样式选择器

.class1.class2, 要连在一起，否则就成了子孙选择器了

.header.sidebar {}

最佳实践实践样例，请移步codepen: 选择器组合

接着，我们还需要关注些常用的选择器怎么使用,

比如 属性选择器

a[href] 将匹配所有具有 href 属性的 a 节点

a[href="www.baidu.com"] 将匹配所有 href 等于指定值的 a 节点

除此之外，属性选择器还能匹配到 指定值 是 实际属性值 的 一个片段 的节点，这些具体用的时候查查MDN吧

另外，还有 伪类选择器

第一种是 拿到指定次序的节点的选择器

li:first-child {} 匹配到 li 的第一个兄弟节点

li:last-child {} 匹配到 li 的最后一个兄弟节点

li:nth-child(an+b) {} 给li的兄弟节点从1开始编号，匹配到满足an+b规则的选择器

li:nth-of-type(an+b) {} 给 li 的 li兄弟节点进行从1开始编号，匹配到满足an+b规则的选择器

第二种是 拿到指定节点处于某一状态的选择器

a:link {}

a:visited {}

a:active {}

a:hover {}

a:focus {}

a:enabled {}

a:disabled {}

a:checked {}

最后就是 伪类选择器 了

span:before {} 在span前插入内容

span:after {} 在span后插入内容

除此之外，使用伪类元素还能匹配 第一行、第一个首字母的功能，需要时查阅 MDN 吧。

补充最佳实践