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，内部td本身具有font-size: 10px声明。从所有内部td的祖先继承到.size20的值被忽略，因为级联已根据该声明确定了该td的值。特异性完全无关紧要，因为.size20选择器首先与内部td不匹配。您处理表格的事实也无关紧要。

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

Answer 2

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

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

2 个答案: