前言
说一下写本文的原因，一切起源于同事的一个问题：
从图中可以看到，文字显示的红色而非黄色，概念上的css 权重被完全颠覆了，那么先抛开这个问题，详细讲讲 css 权重到底是什么。
权重
从上文可以看到，当一个元素被应用了多套样式规则时，浏览器需要决定优先使用哪套样式规则，而这就是通过最终权重决定。
权重值划分：
| 选择器 | 权重值 | |
|---|---|---|
| 1 | !important |
+∞ |
| 2 | 内联样式style |
1000 |
| 3 | id选择器#id |
100 |
| 4 | 类选择器.class伪类 属性选择器 [attribute=] |
10 |
| 5 | 标签选择器div伪元素 |
1 |
| 6 | 通配符*子选择器 >相邻选择器 +兄弟选择器 ~等关系选择器 |
0 |
优先级规则：
- 以上例权重划分值顺序从高到低比较，高等级相同时，比较下一等级，以此类推
- 完全相同时，后定义的样式覆盖前面
- 低权重选择器无法越级高权重，例如二十个标签选择器优先级低于一个类选择器，但css是256进制的，超过二百五十六个时就会发生越级
- 为目标元素直接添加样式，永远比继承样式的优先级高，无视权重规则
结论
熟悉完了权重和优先级相关知识后，回到正题来。
从图中可以看到一个关键信息点，样式并没有产生相互覆盖，所以根据规则4大胆猜测下，伪元素 ::first-line 其实是在div底下声明了个新的虚拟容器包裹住原文本元素，它继承了父元素的属性，但自己的样式属性还是会覆盖父元素属性。同理的还有 ::first-child。
为了验证这一猜想，将 color 属性改为不可继承的 background-color 来看下：
发现与猜想结果相符合，至此也算是破案了。
引申
使用 !important 是一个坏习惯，虽然没有性能问题，但它破坏了样式表中固有的权重等级，使得调试找bug变得更加困难，所以尽量考虑使用样式规则的优先级来解决问题。
参考文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
