CSS 特定优先级

Question

我的 h1 都为红色背景色。对于第一个 h1，ID 具有最高优先级，对于第二个 h1，内联具有最高优先级。为什么？

#myid      { background-color: pink; }
.main h1   { background-color: red; }
div h1     { background-color: blue; }
h1         { background-color: green; }

<!-- the background-color expected 
     to be pink for the following h1 -->
<div class="main" id="myid"> 
    <h1>This is paragraph one!</h1>
</div>
        
<!-- the background-color expected 
     to be brown for the following h1 -->
<div style="background-color:brown;" class="main" > 
    <h1>This is paragraph two!</h1>
</div>

Answer 1

这两者都与样式是直接应用于元素还是应用于父元素有关。

在这两种情况下，您的直觉对于外部div.main元素都是正确的。然而，有些规则适用于h1s，虽然不太具体，但直接适用于h1s，因此它们优先于适用于divs的更具体的规则。

无论继承规则的特殊性如何，直接目标元素的样式始终优先于继承的样式。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Directly_targeted_elements_vs._inherited_styles