What exactly does this CSS selector with a comma match?

问题

I have a question about CSS selectors.

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

Exactly what elements does that select?

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

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?

回答1:

You are misunderstanding the precedence of the comma.

.table_legenda th, td {}

is equivalent to:

.table_legenda th {}
td {}

and not to:

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

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

.table_legenda {
    th, td {}
}

回答2:

it selects tr inside table_legenda class , and in addition to that, all td.

The selector you want is

.table_legenda th, .table_legenda td

In this one, it selects all the th inside .table_legenda and all td inside .table_legenda

回答3:

The , means selecting another attribute so what you should do is:

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

来源：https://stackoverflow.com/questions/27315401/what-exactly-does-this-css-selector-with-a-comma-match

标签

css

css-selectors