这个带有逗号的CSS选择器到底匹配什么？

Question

我对CSS选择器有疑问。

在我的CSS文件中，我有以下代码：

.table_legenda th, td {
    text-align: left;
    vertical-align: top;
    font-weight: bold;
    color: #76818a;
    border-bottom: 1px solid #76818a;
    border-left: 1px solid #76818a;
    white-space: nowrap;
    overflow: hidden;
}

究竟选择了哪些元素？

我认为应该选择所有th与td元素内一个table具有类table_legenda。

然而，当我测试了一下，风格也被应用到td那些其他表内的元素不会有table_legenda类（但有另一个类）。

为什么会这样呢？我想念什么？

Answer 1

您误解了逗号的优先顺序。

.table_legenda th, td {}

等效于：

.table_legenda th {}
td {}

而不是：

.table_legenda th {}
.table_legenda td {}

每次使用逗号时，都需要指定完整的选择器：

.table_legenda th,
.table_legenda td {}

诸如SASS之类的预处理工具可以为您提供其他语法：

.table_legenda {
    th, td {}
}