CSS元素样式重复声明未生效？选择器特异性不符预期

核心原因：直接样式优先级远高于继承样式 #

• 你写的p选择器是直接作用在<p>元素上的样式，给它设置了font-size:22px，这类直接绑定到元素的样式优先级极高。
• 而nav选择器设置的font-size:18px，属于父元素的样式，子元素（包括<p>）只能继承这个值，但继承样式的优先级是所有样式里最低的——只要子元素有同属性的直接样式，继承值就会被直接覆盖，和父样式的声明顺序无关。

验证说明 #

假设你的代码结构如下：

<nav>
  <p>导航内的段落文本</p>
  <a href="#">导航链接1</a>
  <a href="#">导航链接2</a>
</nav>

对应的CSS：

p {
  font-size: 22px;
}
nav {
  font-size: 18px;
}

• 导航里的<a>标签会显示18px，因为它没有自己的font-size直接样式，会继承nav的设置；
• 但<p>标签因为有p选择器给的直接样式22px，所以完全忽略继承来的18px。

解决方法 #

如果要让导航内的<p>显示18px，需要用更具体的选择器直接作用在它身上，覆盖原有的p选择器样式，比如：

p {
  font-size: 22px;
}
nav p {
  font-size: 18px;
}

nav p的选择器特异性比单纯的p更高，所以会生效。

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