HTML
<div class='container'> <p>foo</p> </div>
CSS
.container { color: red; } p { color: blue }
应用的颜色为蓝色.为什么是这样?我在想,因为.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的继承样式将被覆盖