Comma в CSS, несколько селекторов, использующих один и тот же CSS

.Resource table.Tbl td
{ /* some css*/ }

.Resource table.Tbl td.num
{ /* some css 2*/ }

.Resource table.Tbl td.num span.icon
{ /* some css 3*/ }

.Resource table.Tbl2 td
{ /* some css*/ }

.Resource table.Tbl2 td.num
{ /* some css 2*/ }

.Resource table.Tbl2 td.num span.icon
{ /* some css 3*/ }

где CSS для Tbl и Tbl2 должны быть одинаковыми.

.Resource table.Tbl, table.Tbl2 td { /* some css*/ }

не работает.

Как я могу достичь этого, не дублируя целую строку?

Ответ 1

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ }

Вы должны добавить полный путь предка для обоих правил. Не только там, где вы видите различия.

Ответ 2

 .Resource table.Tbl, table.Tbl2 td { /* some css*/ }

ты почти там. Я думаю, вы имеете в виду

 .Resource table.Tbl td, table.Tbl2 td { /* some css*/ }

Обратите внимание на дополнительный td - вам нужно указать полный "путь" к каждому элементу.

Предварительные процессоры CSS, такие как LessCSS, предлагают синтаксические конструкции, облегчающие работу с повторяющимися структурами.

Ответ 3

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css */ }

Вы должны дублировать материал до и после table.TblX, потому что нет возможности сгруппировать оператор , с более высоким приоритетом, чем селектор потомков .

Ответ 4

Вы не можете (ну не в каждом браузере, читайте дальше).

Каждый селектор является независимым, к сожалению.

Это одна из CSS раздражающих проблем.

Существует :any(), который может делать то, что вы пожелаете, но поддержка браузера ограничена.

Вы можете сделать это так или иначе, как вам нравится, и предварительно обработать его на языке сервера, поэтому он выводит независимые селекторы.

LESS является популярным.

Ответ 5

Почему бы вам не использовать один и тот же класс для обеих таблиц? Это классы для