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

问题描述：

我对CSS选择器有疑问.

I have a question about CSS selectors.

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

In my CSS file I have the following code:

.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;
}

究竟选择了哪些元素?

我认为它应该在具有类 table_legenda .

I thought that it should select all the th and td elements inside a table having the class table_legenda.

但是，当我对其进行测试时，该样式也会应用到 not 没有 table_legenda 类的其他表中的 td 元素(但还有另一堂课.

However, when I test it, the style also gets applied to td elements inside other tables that do not have the table_legenda class (but do have another class).

为什么会这样?我想念什么?

Why does that happen? What am I missing?

答

您误解了逗号的优先级.

You are misunderstanding the precedence of the comma.

.table_legenda th, td {}

等效于:

.table_legenda th {}
td {}

和不执行以下操作:

.table_legenda th {}
.table_legenda td {}

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

You need to specify the complete selector each time you have a comma:

.table_legenda th,
.table_legenda td {}

诸如 SASS 之类的预处理工具可以为您提供替代语法:

A preprocessing tool such as SASS can give you alternative syntax:

.table_legenda {
    th, td {}
}

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

相关推荐