CSS 特异性优先级答案

【问题标题】：CSS specificity precedenceCSS 特异性优先级
【发布时间】：2019-02-16 09:14:58
【问题描述】：

我得到了两个 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>

【问题讨论】：

标签： html css css-selectors css-specificity

【解决方案1】：

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

所以在这种情况下，红色总是会赢，因为它是具有最高特异性的规则直接应用于h1。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

无论继承规则的具体性如何，直接目标元素的样式总是优先于继承的样式。

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

【讨论】：

附带说明，背景不是继承的，默认是透明的......所以继承不适用于这里
谢谢。没错，这些样式并没有直接应用在 h1 上。