前言说说写这篇文章的缘由吧。这一切都源于一位同事的提问：从图中可以看出，文字显示为红色而不是黄色，概念性的CSS权重被完全颠覆，那我们先把这个问题搁置一旁，详细说说什么是css权重。权重从上面可以看出，当一个元素应用多套样式规则时，浏览器需要决定先使用哪一套样式规则，而这由最终的权重决定。权重值划分：选择器权重值1!important+∞2内联样式style10003id选择器#id1004类选择器.class伪类属性选择器[attribute=]105标签选择器div伪元素16通配符*子选择器>相邻选择器+兄弟选择器~等关系选择器0优先级规则：上例中权重划分值的顺序是从高到低比较，当高一级相同时比较下一级，以此类推同样，后面定义的样式会覆盖前面的低权重选择器，不能覆盖高权重。比如20个标签选择器的优先级低于1个类选择器，但是css在256，超过256的时候，会出现直接跳级给目标元素添加样式，总是高于优先继承风格，忽略权重规则。结束语熟悉了关于权重和优先级的知识后，回归正题。从图中我们可以看出一个关键信息点，样式之间没有重叠，所以根据规则4，大胆猜测伪元素::first-line其实是在div下声明了一个新的虚拟容器包裹原来的文本元素，它继承了父元素的属性，但是它自己的样式属性仍然会覆盖父元素的属性。::first-child也是如此。为了验证这个猜想，把color属性改成不可继承的background-color看一下：发现和猜想的结果相符，至此案子告破。延长!important的使用是一个坏习惯。虽然没有性能问题，但是破坏了样式表中固有的权重级别，使得调试和查找bug变得更加困难，所以尽量使用样式规则的优先级来解决问题。参考文档https://developer.mozilla.org...
