css - 为什么我的 CSS 有特异性问题？

Question

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

示例:

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>可能有不同的颜色设置，如果您在跨度之外添加文本，您会看到它是灰色的。