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

Question

我有这样的课程：

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

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

Here's a fiddle to demonstrate

所以... 为什么？是不是特定的类样式/选择器应该覆盖基本/父样式？这种行为背后是否存在某种逻辑或推理？我认为这种行为是有意的，但我找不到任何文件。

Answer 1

这是因为您定义的第一个样式规则比第二个更具体，因此它将覆盖。

如果您这样做，它将按预期工作：

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

工作示例here。

Answer 2

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