为何CSS类选择器被h3元素选择器覆盖无法正常生效？

你对CSS优先级的适用场景存在误解，优先级比较规则仅在多个选择器同时直接匹配到同一个元素时生效，继承自父元素的样式优先级远低于任何直接匹配到元素自身的样式规则。
你代码中的.name_date类选择器仅匹配到了外层的div元素，并没有直接选中内部的h3元素：h3能拿到#861781这个颜色值是继承自父级div，而你定义的h1,h2,h3元素选择器是直接匹配到了h3元素本身，因此最终h3会应用直接匹配它的元素选择器的颜色规则。你认知里「类选择器优先级高于元素选择器」的规则本身没有错，但不适用于两个选择器命中不同元素的场景。

你可以根据实际需求选择以下任意一种方式修改：

• 写后代选择器直接命中.name_date下的h3元素，该选择器优先级高于单独的h3元素选择器，会覆盖原有规则：

.name_date h3 {
  color: #861781;
}

• 如果你需要.name_date下的所有子元素都优先使用父级定义的颜色，可以指定子元素颜色继承父级，避免重复定义：

.name_date * {
  color: inherit;
}

• 也可以给目标h3单独添加类名，编写对应的样式规则，优先级同样满足覆盖要求。

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