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

Question

.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*/ }

не работает.

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

LESS популярен.