为何特异性更高的CSS选择器2未生效，浏览器反而应用选择器1样式？

这事儿的核心其实是两个选择器根本没在给同一个元素设置样式，特异性高低在这里根本没派上用场！

咱们拆解一下两个选择器的作用对象：

• 选择器1 .class2 .class5 > li > a：它直接瞄准了页面里的<a>标签，给这些链接元素本身设置了color: #777777。
• 选择器2 body #section .class1.class3 #ul：它选中的是<ul id="ul">这个列表容器，给这个容器设置了color: #fff。

那为什么ul的颜色没传递给a标签呢？因为<a>标签是个“有主见”的元素——浏览器的默认样式里，已经给<a>设置了专属的color（比如咱们常见的蓝色）。这种情况下，color的继承规则就不生效了：子元素如果自身已经有color属性的声明（不管是默认样式还是你写的选择器1），父元素的color值是传不下去的。

哪怕选择器2的特异性拉满，它也只是给ul换了颜色，根本没碰a标签。而选择器1是直接给a标签染了色，浏览器当然会用直接作用在a上的样式啦！

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