嵌套表可能存在的 CSS 特异性和继承错误答案

【问题标题】：Possible CSS Specificity and Inheritance Bug with nested tables嵌套表可能存在的 CSS 特异性和继承错误
【发布时间】：2016-03-30 04:58:38
【问题描述】：

有人能解释一下吗？

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

【问题讨论】：

有什么问题，你想要什么？
在 css 中，最后一个类的效果会被之前的重叠。它正确地继承了 size20 类，但是当它到达 td 时，它与 sclass size20 重叠 td 类
问题是他不明白为什么代码会这样。那就是问题所在。他想了解。这就是他想要的。从单行字中可以看出，“任何人都可以对此有所了解吗？”

标签： css html-table font-size css-specificity

【解决方案1】：

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

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

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

【讨论】：

感谢您的解释！

【解决方案2】：

在 css 中，最后一个类的效果将与上一个重叠。它正确地继承了 size20 类，但是当它到达 td 时，它与 td 类重叠了 size20 类。如果您再次需要 size20 效果，那么您需要在那里添加该类。这抑制了td的影响，这就是第一个div中发生的事情

【讨论】：