Question

有一个<p>标记，其中包含类.eleclass和标识#eleid，并且我已为<p>标记指定了3个css，其中第二个类使用id指定，第三个使用刚刚宣布。

＆＃13;

p#eleid{
  color:yellow;
}
p.eleclass{
  color:blue;
}
p{
  color:red;
}

＆＃13;

<p id="eleid" class="eleclass">
hello para.
</p>

＆＃13;

现在我想知道为什么适用于p#eleid的规则在css从上到下自然运行时起作用，在底部颜色为红色，因此<p>应为红色。

它背后是否隐藏了任何css规则？

这个问题包括不仅使用id。

Answer 1

归结为 CSS特异性。

来自MDN：

特异性是浏览器决定哪些CSS属性值与元素最相关的方式，因此将被应用。

实际上，基于ID的选择器比基于标签的选择器具有更高的优先级。这是因为ID比标签更具有特定。换句话说，标签选择器适用于所有p元素，而ID仅适用于具有ID 的p 。

有一些特殊性的方法，例如!important关键字 - 但是，我主要建议反对解决特异性问题，因为它可能会导致错误。