两个特异性相同的CSS声明出现不符合预期的渲染异常

问题原因解释 #

• 你遇到的现象本质是两个CSS规则作用的目标对象完全不同，不存在优先级比较的前提：
  • ul li 选择器匹配的是<li>元素本身，它设置的color: green作用于<li>元素自身。
  • li:first-line 是伪元素选择器（现行规范推荐写为li::first-line，单冒号是旧兼容写法），它匹配的是<li>内部的第一行文本节点，它设置的color: red直接作用于这段文本，和<li>元素本身的样式是两套独立的规则，不需要和ul li的优先级做对比。
• 项目符号显示为绿色的原因：列表的项目符号默认由::marker伪元素控制，它会继承所属<li>元素本身的color属性，不会继承::first-line伪元素的样式，所以会拿到ul li设置的绿色。
• 为什么给ul li加!important也不生效：!important只是提升了<li>元素本身color属性的优先级，并不会覆盖作用在文本节点上的::first-line的color设置，自然不会改变文本的显示颜色。

解决方法 #

如果需要让列表文本也显示为绿色，任选一种即可：

• 删除li:first-line { color: red; }这条规则
• 给li:first-line也设置color: green
• 给li:first-line添加更高优先级的颜色覆盖规则，比如li::first-line { color: green !important; }

内容的提问来源于stack exchange，提问作者Puzzi22