2

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

8 回答 8

11

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

于 2009-02-11T08:32:04.563 回答
3

所有关于更高特异性规则的赌注都失败了，因为它针对的是 TD 而不是 SPAN。你必须知道什么时候折叠它们。:-)

编辑

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

...确实如此。你会在这里找到几段： http://www.w3.org/TR/CSS21/cascade.html#inheritance

其中指出，

“...如果没有为 [子元素] 分配颜色，则 [子元素] 将继承父元素的颜色...当发生继承时，元素继承计算值。来自父元素的计算值变为孩子的指定值和计算值”

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

于 2009-02-11T15:24:24.040 回答
0

两条规则都适用。

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

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

于 2009-02-12T23:25:01.877 回答
0

span 在 td 内部，所以第一个选择器实际上更具体。

于 2009-02-11T08:34:25.307 回答
0

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

于 2009-02-11T08:34:33.247 回答
0

这似乎table.data tr.inactive td更具体，但实际上table.data .negative是因为它调用元素的类，而不是一般元素td

于 2009-02-11T08:36:08.203 回答
0

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

于 2009-02-11T08:47:55.490 回答
0

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

于 2009-02-11T15:28:37.900 回答