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

我有这样的课程：

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

当我应用这些类时，我希望带有class

.tdValignTop

的

td

将垂直对齐到顶部，即使

.tableGeneric

尝试将其对齐到中间。但是，似乎我错了：表格单元格将使用

.tableGeneric

的样式，而不是

.tdValignTop

的样式

---

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

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

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

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

---

工作示例。

您所认为的“特定”在CSS意义上并不是更具体的，而在应用CSS时，重要的是CSS的特定性。选择器定义选择器的句法结构术语的特殊性。在本例中，第一个选择器有一个类名和两个元素名，因此它比另一个选择器更具体，后者只包含一个类名。

其中一个选择器拼写错误<代码>垂直对齐。第二，检查我们的CSS特性。@j08691哦。哎呀。修好了，谢谢。“问题”仍然存在。你检查过CSS的特殊性吗？正如@j08691所指出的，这是一个问题。。另外，删除换行符：@JoshCrozier是的，换行符很愚蠢。我更新了小提琴，没有断线。至于特异性，我不知道这是我应该寻找的。谢谢，我来看看。我知道它更具体，但我的问题是为什么它比直接应用于元素的第二个样式规则更具体。谢谢你回答这个问题！我一直认为CSS样式是基于“最低级别元素”应用的。我从不知道CSS的特殊性，因此我感到困惑，并且无法搜索相关结果（直到人们在评论中提到它）。