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元素的直觉都是正确的。但是，有一些适用于h1的规则，虽然较不具体，但直接适用于h1，因此它们优先于适用于div的更具体的规则

直接针对目标元素的样式始终优先于继承的样式，而不管继承规则的特殊性。

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

Answer 2

您不是将背景应用于h1元素，而是应用于其父元素。考虑到这一点，这里没有特殊性，因为我们仅考虑适用于h1的规则，如果没有规则，则考虑继承（应用于子元素继承的应用于父元素的样式）。另外，background并不是默认继承的值，因此即使您没有为h1指定背景，继承也不会在此处应用。

因此，在这种情况下，红色总是会获胜的，因为这是将特定性最高的规则直接直接应用于h1。

Answer 3

存在粉红色的背景，但是它被位于其上方的H1的红色背景隐藏。

如果在#myid样式中添加一些填充，则会在H1的红色周围看到粉红色的轮廓

CSS特异性优先级

3 个答案: