特殊性如何处理继承的样式？ [英] How does specificity work with inherited styles?

问题描述

HTML

HTML

<div class='container'>
  <p>foo</p>
</div>

CSS

.container {
  color: red;
}

p {
  color: blue
}

代码笔

应用的颜色是蓝色。为什么是这样？我认为 .container 比 p 更具特异性，颜色会变成红色。

The applied color is blue. Why is this? I was thinking that since .container has more specificity than p, the color would end up being red.

这里发生了什么？为什么是蓝色的？

What is happening here? Why is it blue?

我的假设是，过程是 p 有任何选择器吗？它不会查找 .container 。如果没有任何样式，它会查找并使用的样式。容器。

My hypothesis is that the process is "Does p have any selectors? If so use it and don't look up for .container. If it didn't have any styles, it'd look up and use the style for .container."

推荐答案

从Specifity上的MDN页面

From the MDN page on Specifity

无论继承规则的具体性如何，直接定向元素的样式始终优先于继承样式。

Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.

https：//developer.mozilla。

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

因此， p 将覆写 .container 无论什么。从 .container 继承的样式被覆盖

Hence p will override .container no matter what. The inherited style from .container is overwritten

这篇关于特殊性如何处理继承的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！