为什么我的 CSS 存在特异性问题？答案

【问题标题】：Why is my CSS having specificity problems?为什么我的 CSS 存在特异性问题？
【发布时间】：2010-10-06 20:38:33
【问题描述】：

有人能解释一下为什么在这个例子中第一条规则不是第二条吗？根据我的CSS特异性知识，第二种更具体，应该使用。但是所有浏览器都先使用。

示例：

http://apblog.lv/misc/css_spec/example2.html

CSS：

table.data .negative {
  /* css specificity: 0,0,2,1 */
  color: red;
}
table.data tr.inactive td {
  /* css specificity: 0,0,2,3 */
  color: gray; /* this should be used */
}

HTML：

<table class="data">
  <tr class="inactive">
    <td><span class="negative">should be gray</span></td>
  </tr>
</table>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

两个规则都适用。

如果您认为当您沿着 DOM 树的分支向下移动时会应用规则，那么您会在 TD 处找到一个停靠点，而 .negative 规则会在您到达 SPAN 元素时覆盖它。

更具体地说，第二条规则适用于 TD 及其所有子元素，默认情况下，颜色属性可以传播到其中，但是当渲染引擎到达 SPAN 时，第一条规则进入场景，并覆盖颜色值。

【讨论】：

【解决方案2】：

您的<span class="negative"> 是最里面的元素，具有显示样式的元素也是如此。您的 <td> 可能有不同的颜色设置，如果您在跨度之外添加文本，您将看到它是灰色的。

【讨论】：

感谢您的回答！是的，这似乎合乎逻辑，但我在w3.org/TR/CSS21/cascade.html#cascade 中找不到你所说的任何内容。
@andrisp，请参阅同一页面上的“继承”以获得更多说明。

【解决方案3】：

All bets are off 涉及更高特异性规则，因为它针对的是 TD 而不是 SPAN。你必须知道什么时候折叠它们。 :-)

编辑

您在评论中说您没有看到这里提到的概念： http://www.w3.org/TR/CSS21/cascade.html#cascade

...这是真的。你会在这里找到几段： http://www.w3.org/TR/CSS21/cascade.html#inheritance

哪条规定，

"...如果没有为[子元素]分配颜色，则[子元素]将继承父元素的颜色...发生继承时，元素继承计算值。计算值来自父元素既成为指定值又成为子元素的计算值”

在您的示例中，继承原则不适用，因为 CSS 规则直接针对 color 属性的 SPAN 元素。

【讨论】：

【解决方案4】：

您已经正确计算了每条规则的特异性，并且第二条规则的特异性高于第一条规则的特异性。 BUT 特异性仅用于“对具有相同重要性和来源的规则进行排序......”（http://www.w3.org/TR/CSS21/cascade.html#cascading-order）换句话说，特异性是一个决胜局，在这种情况下与被打破。

【讨论】：

【解决方案5】：

这与css优先级没有直接关系。两个规则都适用，对 td 无效，对 span 为负，但 span 元素在 html structore (DOM) 中的 td 元素“上方”，因此会覆盖 td。在 span 之外添加一个文本，你会看到两个规则都被使用了。

【讨论】：

【解决方案6】：

看起来table.data tr.inactive td 更具体，但实际上table.data .negative 是因为它正在调用元素的类，而不是一般元素td

【讨论】：

【解决方案7】：

您的类未按预期工作的原因是您在 HTML 中定义类的方式，而不是 CSS。如果您注意到，inactive 类被设置在包含的<tr> 元素中，然后被<span> 类“否定”覆盖。如果您希望首先应用 inactive 颜色样式，请在颜色定义后添加一个 !important：

 table.data tr.inactive td {
      /* css specificity: 0,0,2,3 */
      color: gray !important; /* this should be used */
 }

这将覆盖negative 样式。

【讨论】：

【解决方案8】：

span在td里面，所以第一个选择器其实更具体。

【讨论】：