为何子元素的CSS规则优先级高于父元素？

你的疑惑核心是误解了CSS优先级的适用场景——优先级仅当多个CSS规则同时作用于同一个元素时才会生效，而你提到的规则3和规则4，作用的是完全不同的元素：

• 规则3 .main-text {} 匹配的是HTML中的<p class="main-text">元素
• 规则4 .main-container {} 匹配的是HTML中的<div class="main-container">元素

这两个规则分别作用在父元素div和子元素p上，彼此没有覆盖关系，根本不存在优先级比较的前提。

如果你的实际场景是：.main-container设置了某些样式，你以为p元素会继承这些样式，但却被.main-text的样式覆盖了——这是CSS继承机制的问题，和优先级无关：

• 父元素的样式会被子元素继承，但继承来的样式优先级极低（特异性视为0）
• 直接匹配子元素的规则（比如.main-text），哪怕特异性只有010，也会远高于继承来的样式，所以会显示.main-text的样式。

举个具体例子：

.main-container { color: red; } /* 作用在div上，p会继承这个颜色 */
.main-text { color: blue; } /* 直接作用在p上，覆盖继承的红色 */

这里p显示蓝色，不是因为.main-text优先级比.main-container高，而是因为继承的样式优先级低于直接匹配元素的样式。

总结：只有当多个规则针对同一个元素设置相同属性时，才需要用特异性和位置来判断优先级。不同元素的规则之间，不存在优先级高低的比较。

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