究竟如何选择这个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_legenda

的表格

问题是它还在另一个表中选择了 td 元素，但没有设置 .table_legenda 类（但是设置了另一个类）。< / p>

为什么呢？我错过了什么？

TNX

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 {}
}

Answer 2

除此之外，还选择tr inside table_legenda class，和，所有td。

你想要的选择器是

.table_legenda th, .table_legenda td

在此单选中，它会选择所有th inside .table_legenda和所有td inside .table_legenda

Answer 3

这意味着选择另一个属性，所以你应该做的是：

.table_legenda th,.table_legenda 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;
}