css - 嵌套表格可能的 CSS 特异性和继承错误

Question

任何人都可以阐明这一点吗？

HTML:

<table>
  <tr>
    <td></td>
    <td class="size20">
      <div>Div 1 is font-size: 20px</div>
      <table>
        <tr>
          <td>
            <div>Div 2 should be font-size 20px because of inheritance and specificity</div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS:

.size20 {
  font-size: 20px;
}

td {
  font-size: 10px;
}

http://codepen.io/geoyws/pen/wGqqMB

Answer 1

仅当级联未解析给定元素的值时才使用继承值。参见 "specified values" in the spec .

你的内部 div 的字体大小为 10 像素，因为它继承自内部 td，它本身有一个 font-size: 10px 声明。从所有内部 td 的祖先继承到 .size20 的值将被忽略，因为级联已经根据该声明确定了该 td 的值。特异性是完全无关紧要的，因为 .size20 选择器一开始甚至不匹配内部 td。您正在处理表格这一事实也无关紧要。

一切都按设计运行。正如您所建议的那样，规范或浏览器都没有缺陷。