класс CSS перезаписывает другие

Question

У меня есть HTML-таблицы, где применяется следующий CSS:

.tbst th, 
td { 
    padding: 12px 3px !important; 
    text-align: center !important; 
    vertical-align: middle !important; 
    border: 1px solid #ccc !important; 
    font-size: 12px; 
    overflow: hidden !important; 
    line-height: 24px !important; 
} 

и

.cmstb th, 
td { 
    padding: 12px 3px !important; 
    text-align: center !important; 
    vertical-align: middle !important; 
    border: 1px solid #ccc !important; 
    font-size: 14px; 
    overflow: hidden !important; 
    line-height: 24px !important; 
} 

Одна таблица использует .tbst класс, другой .cmstb. Но по какой-то причине второй CSS применяется к обеим таблицам, поэтому второй CSS перезаписывает стиль в первом CSS. Что я здесь делаю неправильно?

Answer 1

Вы устраиваете th правильно, но для td, стиль написан на языке, потому что он не является специфическим для любой таблицы. сделать его конкретным для этих таблиц

.tbst th, 
.tbst td { 
    padding: 12px 3px !important; 
    text-align: center !important; 
    vertical-align: middle !important; 
    border: 1px solid #ccc !important; 
    font-size: 12px; 
    overflow: hidden !important; 
    line-height: 24px !important; 
} 
and 

.cmstb th, 
.cmstb td { 
    padding: 12px 3px !important; 
    text-align: center !important; 
    vertical-align: middle !important; 
    border: 1px solid #ccc !important; 
    font-size: 14px; 
    overflow: hidden !important; 
    line-height: 24px !important; 
} 

Answer 2

класс td переоценивается. Кроме того, они используют одинаковые значения, кроме размера шрифта. вы должны конденсировать его, используя меньше. и тогда вы применили бы только разницу ко второй таблице.

.tbst th, .tbst td { 
padding: 12px 3px !important; 
text-align: center !important; 
vertical-align: middle !important; 
border: 1px solid #ccc !important; 
font-size: 12px; 
overflow: hidden !important; 
line-height: 24px !important; } 

и

.cmstb th, .cmstb td { 
font-size: 14px; } 

Answer 3

Вы ориентируетесь тд дважды, последние определенные свойства всегда отменяют те определенные ранее.

Даже лучше (и более производительный) CSS будет следующим:

.cmstb-th, 
.cmstb-td, 
.tbst-th, 
.tbst-td { 
    padding: 12px 3px !important; 
    text-align: center !important; 
    vertical-align: middle !important; 
    border: 1px solid #ccc !important; 
} 

.tbst-th, 
.tbst-td { 
    font-size: 12px; 
} 

.cmstb-th, 
.cmstb-td { 
    font-size: 14px; 
} 

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