CSS优先级异常：标签选择器覆盖类选择器问题求助

嘿，我完全懂你为啥困惑了——这可不是CSS优先级规则失效，而是你误解了选择器的作用对象和继承的优先级逻辑～

问题出在哪？ #

你把.spring-boot类加在了<article>标签上，这个类的font-family样式是给<article>本身的。虽然font-family是会被子元素继承的CSS属性，但你的<p>元素被单独的p标签选择器直接选中并设置了字体样式。

这里的核心规则是：直接应用在元素上的样式（哪怕是优先级较低的标签选择器），优先级远高于从父元素继承来的样式——继承来的样式优先级是最低的，根本不会和直接选中的选择器参与优先级比拼。所以不是p标签选择器优先级比类选择器高，而是你的类选择器根本没直接作用到<p>上呀！

解决方法 #

有几种简单的方式可以达到你想要的效果：

1. 让类选择器直接指向<p>元素

修改你的CSS，让选择器选中.spring-boot容器内的<p>标签，这样这个选择器的优先级会高于单纯的p标签选择器：

p { 
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
}
.spring-boot p { 
  font-family: cursive; 
}

这个.spring-boot p选择器的优先级计算是「类选择器 + 标签选择器」，比单纯的「标签选择器」优先级更高，自然就能覆盖原有的p样式了。

2. 移除<p>的标签选择器样式

如果你希望所有<p>都继承父容器的字体样式，那可以直接删掉单独的p标签选择器，这样<p>就会自动继承<article>的font-family：

.spring-boot { 
  font-family: cursive; 
}

3. 谨慎使用!important（不推荐）

虽然可以给.spring-boot的font-family加上!important强制提升优先级，但这种方式会打乱正常的CSS优先级体系，后续维护容易出问题，所以除非万不得已，不建议用：

.spring-boot { 
  font-family: cursive !important; 
}

小提示 #

以后遇到类似问题，先检查选择器是不是真的选中了你想要设置样式的元素——很多时候不是优先级规则错了，而是选择器的作用范围没搞对～

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