css - 为什么后代选择器会覆盖类选择器？

Question

我有这样的类(class):

.tableGeneric tr td
{
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
.tdValignTop
{
    vertical-align: top;
}

当我应用这些类时，我希望类 .tdValignTop 的 td 会垂直对齐到顶部，即使 .tableGeneric 尝试将其对齐到中间。但是，我似乎错了:表格单元格将使用 .tableGeneric 的样式而不是 .tdValignTop 的样式。

Here's a fiddle to demonstrate .

那么……为什么？特定的类样式/选择器不应该覆盖基本/父样式吗？这种行为背后是否有某种逻辑或推理？我假设该行为是故意的，但我找不到任何相关文档。

Answer 1

您认为的“特定”在 CSS 意义上并不更具体，在应用 CSS 时，CSS 特定性才是最重要的。 CSS specificity rules根据选择器的句法结构定义特异性。在这种情况下，第一个选择器有一个类名和两个元素名，因此它比另一个只包含一个类名的选择器更具体。