Question

有人可以解释一下为什么在这个例子中第一条规则不是第二条规则？根据我的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>

Answer 1

你的<span class="negative">是最里面的元素，具有显示风格的元素也是如此。您的<td>可能有不同的颜色设置，如果您在跨度外添加文字，则会看到灰色。

Answer 2

关于更高特异性规则的

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规则直接针对颜色属性定位SPAN元素。

Answer 3

跨度位于td内部，因此第一个选择器实际上更具体。

Answer 4

您的类没有按预期工作的原因是因为您在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样式。

Answer 5

似乎table.data tr.inactive td更具体，但真正的table.data .negative是因为它调用了元素的类，而不是通用元素td

Answer 6

这与css优先级无直接关系。应用这两个规则，对td无效，对跨度为负，但span元素在html结构（DOM）中的td元素“之上”，从而覆盖td。在跨度外添加文本，您将看到使用了两个规则。

Answer 7

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

Answer 8

这两条规则都适用。

如果你想到在DOM树的分支下面应用规则，那么你会在TD上找到一个停靠点，而.negative规则会在你到达SPAN元素时覆盖它。

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

为什么我的CSS有特殊性问题？

实施例

CSS：

HTML：

8 个答案: