嵌套表可能 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

在 css 中，最后一个 class 效果将与之前的效果重叠。它正确地继承了 size20 class，但是当它达到 td 时，它与 class size20 重叠了 td class。如果您再次需要 size20 效果，则需要在此处添加 class。这抑制了 td 的影响，这就是第一个 div

中发生的事情

Answer 2

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

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

一切都按设计进行。您建议的规范或浏览器都没有缺陷。

嵌套表可能 CSS 特异性和继承错误

Possible CSS Specificity and Inheritance Bug with nested tables

css

html-table

font-size

css-specificity