CSS选择器

CSS 选择器是用来指定该组 CSS 样式会对什么元素生效的，是连接 HTML 结构和 CSS 样式的桥梁。

选择器分离

ID 选择器 #id{}
类选择器 .link{}
通配选择器 *{}
标签选择器 div{}
属性选择器 input[class=input]{}
伪类选择器 :hover{}
伪元素选择器 ::before{}
组合选择器 h1 + p
否定选择器 :not(.link){}

属性选择器

[attr]，用来选择带有 attr 属性的元素，如刚提到的 a [href]。
[attr=xxx]，用来选择有 attr 属性且属性值等于 xxx 的元素
[attr~=xxx]，这个选择器中间用了～=，选择属性值中包含 xxx 的元素，但一定是逗号分隔的多个值中有一个能和 xxx 相等才行
[attr|=xxx]，这个选择器是用来选择属性值为 xxx 或 xxx- 开头的元素，比较常用的场景是选择某一类的属性。
[attr^=xxx]，这个选择器会匹配以 xxx 开头的元素，实际上就是用正则去匹配属性值，只要是以 xxx 开头都可以。
[attr$=xxx]，这个选择器和上一个相似，它是用正则匹配的方式来选择属性值以 xxx 结尾的元素。
[attr*=xxx]，这个是用正则匹配的方式来选择属性值中包含 xxx 字符的所有元素。这个选择器的规则算是最宽泛的，只要 xxx 是元素属性值的子字符串，这个选择器就会生效。

组合选择器

后代选择器

1
2
3

.page p{
    font-size: 18px;
}

class 为 page 元素里面的所有 p 元素的字体都改成 18px

子元素选择器

1
2
3

.page > p{
    font-size: 18px;
}

class 为 page 元素里面的所有儿子元素 p 的字体都改成 18px

相邻兄弟选择器

h1 + p{
    margin-top: 10px;
    color: red;
}

h1 + p 选择器就表示选择紧邻 h1 元素的 p 元素，让这个 p 元素距离标题隔开 10px，并且字体设置为红色。这里要注意，相邻选择器只能选择紧挨在 h1 后面的 p 元素，而不能向前找。

通用兄弟选择器

1
2
3

h1 ~ p{
    color: red;
}

上面的选择器会选中和 h1 元素同级且在 h1 元素后面出现的 p 元素，并给它们加上红色的字体样式

伪类选择器和伪元素选择器

伪元素是真实存在的元素，在页面中可以有内容，样式。伪类是标记一些特殊的状态，鼠标选中某个元素时，状态下的样式。某个元素的状态。

伪类选择器

标记状态的伪类

:link，选取未访问过的超链接元素。如果我们注意过搜索引擎的结果的话，它里面的链接只要点过的就会变色，从而标记哪个链接是访问过的。:link 这个属性就是用来标识没访问过的链接。
:visited，选取访问过的超链接元素。和第一条相反，:visited 是用来标记哪个链接是已经访问过的，防止重复点击。
:hover，选取鼠标悬停的元素。，这个伪类经常用在 PC 端，当鼠标放在一个元素上时，可以用 :hover 来控制鼠标悬停的样式。因为在移动端里没有鼠标的概念，所以移动端里很少用这个伪类。
:active，选取点中的元素。这个伪类的作用在刚才提到过了，当我们希望按钮有操作反馈的时候，可以用它来标记操作反馈的样式。当然这个伪类也是可以通用的，并不是只能用在按钮上。
:focus，选取获得焦点的元素。这个伪类用来标识获得焦点的元素，比如搜索框在聚焦的时候有个比较明显的边框，方便用户知道当前在可输入的状态。

筛选功能的伪类

:empty，选取没有子元素的元素。比如选择空的 span，就可以用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空，不会被这个伪类选中。
:checked，选取勾选状态的 input 元素，只对 radio 和 checkbox 生效。
:disabled，选取禁用的表单元素。
:first-child，选取当前选择器下第一个元素。
:last-child，和 first-child 相反，选取当前选择器下最后一个元素。
:nth-child(an+b)，选取指定位置的元素。这个伪类是有参数的，参数可以支持 an+b 的形式，这里 a 和 b 都是可变的，n 从0起。使用这个伪类可以做到选择第几个，或者选择序号符合 an+b 的所有元素。比如使用 li:nth-child(2n+1)，就可以选中 li 元素中序号是2的整数倍加1的所有元素，也就是第1、3、5、7、9、2n+1个 li 元素。
:nth-last-child(an+b) ，这个伪类和 nth-child 相似，只不过在计数的时候，这个伪类是从后往前计数。
:only-child，选取唯一子元素。如果一个元素的父元素只有它一个子元素，这个伪类就会生效。如果一个元素还有兄弟元素，这个伪类就不会对它生效。-
:only-of-type，选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类允许父元素里有其他元素，只要不和自己一样就可以。

伪元素选择器

伪元素选择器是用于向某些元素设置特殊效果。伪元素选择器选中的并不是真实的 DOM 元素，所以叫伪元素选择器。伪元素选择器常用的也就下面 5 个：

::first-line，为某个元素的第一行文字使用样式。
::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
::before，在某个元素之前插入一些内容。
::after，在某个元素之后插入一些内容。
::selection，对光标选中的元素添加样式。

伪元素选择器构造的元素是虚拟的，所以不能用 JS 去操作它。

如果同时使用了 before 和 first-letter 两个伪类，第一个字是要从 before 里的内容开始算起的，如果 before里面的内容是一个非文本元素，那 first-letter 也会作用在这个非文本元素上，但是不一定能生效。

first-line 和 first-letter 不适用于内联元素，在内联元素中这两个选择器都会失效。

在 CSS3 中，规定了伪类用一个冒号（:）表示，伪元素用两个冒号表示（::）。但除了 selection，其余四个伪元素选择器已经在 CSS2 中存在且和伪类用的是一样的单冒号表示的。为了向下兼容，现在的浏览器中伪元素选择器用单冒号和双冒号都可以。在没有兼容问题的情况下，还是建议大家按着新的 CSS3 标准来开发。

样式优先级关系

当一个 DOM 元素受到多条样式控制的时候，样式的优先级顺序应该是

1	内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式

选择器权重

内联样式的权重是 1000。
ID 选择器里样式的权重是 100。
类选择器、属性选择器和伪类选择器里样式的权重是 10。
标签选择器里样式的权重是 1。
通用选择器直接忽略。

1、这个计算模型仅供理解样式优先级关系，不能代表浏览器里真实的计算方法。
2、权重值的计算不能越级，比如选择器 A 只有 1 个 ID 选择器，权重就是 100；选择器 B 用了 20 个类选择器，权重值是 200。这个时候如果两个选择器对应的样式作用在同一个 DOM 节点上，那么还是选择器A会生效，因为它的选择器级别更高。
3、如果两个选择器 A 和 B 是同级别选择器，并且最终计算的权重值也相同，那么这两个选择器谁在后面谁优先级高。
4、!important 优先级最高。

参考

手把手带你打造自己的UI样式库