11种样式选择器与样式优先级计算
tips：每个技术点都值得优学优写：12期
好文推荐：
写在前面
从前偶尔也敢胡吹一下，没有搞不定的样式，自己写的样式还好一些，现在是真不敢胡说了。 样式之复杂，难以想象，本文再梳理一下有关样式规则。
11 种样式选择器
- 通配符选择器，* 是通配符，表示其下的样式对所有元素生效，但通配符的优先级较低。
- id选择器，例如 #container
- 类选择器，例如 .box
- 标签选择器（类型选择器），例如 div span p 等元素标签，直接以标签名称作为样式选择器
- 后代选择器，有层级关系的叠加样式选择器，是样式选择器的一种组合使用，例如 div p
- 子选择器，例如 ul>li 或 div>p，对 ul 直接的子元素 li 设置样式，对 div 的直接子元素 p 设置样式。
- 伪类选择器，例如 a:hover，当鼠标悬浮于 a 标签时的样式。
- 伪元素选择器，例如常见的 ::before 和 ::after，单冒号写法也被现代浏览器支持（那是css2的语法）。
- 相邻兄弟选择器，例如 img + p，样式将对 img 图片后面紧跟着的 p 段落生效。
- 兄弟选择器，A~B 作用于 A 元素之后所有同层级 B 元素。
- 属性选择器，通过已经存在的属性名或属性值匹配元素，例如 a[href="example.org"] 或 a[title]。
样式优先级是如何计算的？
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
下面列表中，选择器类型的优先级是递增的：
-
1.类型选择器(标签选择器)（例如，h1）和伪元素（例如，::before）
-
2.类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）
-
3.ID 选择器（例如，#example）。
-
嵌套组合选择器 多种选择器嵌套组合的优先级，往往比单一的样式选择器优先级更高。 例如 #id > div > p{} 的优先级会比 p{} 和 div > p{} 的优先级更高。
-
内联样式 给元素添加的内联样式 (例如，style="font-weight:bold") 几乎总会覆盖外部样式表的任何样式 ， 因此可看作是具有更高的优先级。
-
!important 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。 当然 !important 可以覆盖 !important，此时需要比较权重。
-
具体的优先级权重规则略显复杂： 一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。 百位： 选择器中包含ID选择器则该位得一分。 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。 个位：选择器中包含元素、伪元素选择器则该位得一分。
下面是一个示例表：
| 选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 |
|---|---|---|---|---|---|
| h1 | 0 | 0 | 0 | 1 | 0001 |
| h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 |
| li > a[href*="en-US"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 |
| #identifier | 0 | 1 | 0 | 0 | 0100 |
| 内联样式 | 1 | 0 | 0 | 0 | 1000 |
写在后面
tips：可比条件下，写在后面优先级高于写在前面的。
tips：可比条件下，同为载入样式，后面载入的优先级更高。
tips：可比条件下，@import 引用的样式，权重小于 link 引入的样式。
