继承 CSS 属性:特异性之谜
将 CSS 规则应用于 Web 元素时,特异性的概念在确定哪些元素适用时起着至关重要的作用。规则优先。然而,在这种情况下对继承属性的处理经常会引起问题。
继承样式是从父元素传递到其后代元素的属性。有理由想知道继承属性的特异性与直接目标规则的特异性相比如何。
特异性和继承
与流行的看法相反,特异性并不直接控制继承属性的优先级。相反,任何针对该元素的 CSS 声明的特异性都会直接取代任何继承的属性。
示例:覆盖继承的样式
考虑以下 HTML 和 CSS 代码:
<h2>This should be black</h2> <div class="all_red_text"> <h2>This should be red</h2> </div>
.all_red_text { color: red; }
在这种情况下, .all_red_text div 继承浏览器默认的黑色行为。颜色:红色; .all_red_text 中的属性会覆盖此继承的样式,并且文本将显示为红色。
但是,如果我们添加直接针对 h2 元素的规则,如下所示:
h2 { color: black; } .all_red_text { color: red; }
在此修订版中例如,颜色:黑色; h2 元素的显式规则优先于继承的属性,导致所有 h2 文本均为黑色。
结论
继承的 CSS 属性本质上并不比继承的 CSS 属性或多或少具体。直接针对的规则。无论继承的属性来自父元素还是用户代理,直接目标规则的特异性始终具有更高的优先级。了解这种行为对于在 CSS 中使用继承样式时避免出现意外结果至关重要。
以上是CSS 特异性如何影响继承属性?的详细内容。更多信息请关注PHP中文网其他相关文章!