css – 特异性如何与继承的样式一起使用?

前端之家收集整理的这篇文章主要介绍了css – 特异性如何与继承的样式一起使用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML
<div class='container'>
  <p>foo</p>
</div>

CSS

.container {
  color: red;
}

p {
  color: blue
}

Code Pen

应用的颜色为蓝色.为什么是这样?我在想,因为.container比p具有更多的特异性,颜色最终会变成红色.

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

我的假设是,过程是“是否有任何选择器?如果是这样的话,请使用它而不要查找.container.如果它没有任何样式,它会查找并使用.container的样式. “

解决方法

从特定的MDN页面

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

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

因此,无论如何,p都会覆盖.container.来自.container的继承样式将被覆盖

猜你在找的CSS相关文章