CSS: как переопределить свойство?

Question

я определил следующий стиль для таблицы

table tbody.center tr td { 
    text-align: center; 
} 

Это цель состоит в том, чтобы иметь содержание центра выравнивания содержимого ячейки таблицы, которая имеет класс TBODY равно «центра».

Некоторые клетки все еще требуется выравнивание по левому краю, поэтому I'would хотел иметь дополнительный стиль

table tbody tr td.left { 
    text-align: left; 
} 

Но это не работает именно мне нужно:

<table> 
    <tbody class="center"> 
     <tr> 
      <td class="left">Should be left aligned, but is not</td> 
      <td>Center aligned</td> 
     </tr> 
     <tr> 
      <td>long text to stretch the table to be big enough to see the alignment</td> 
      <td>long text to stretch the table to be big enough to see the alignment</td> 
     </tr> 
    </tbody> 
</table> 

В этом markup 'td' выравнивание объекта имеет фактически стиль, определяемый 'table tbody.center tr td'.

Для того, чтобы решить эту проблему, мне нужно ввести дополнительный стиль:

table tbody.center tr td.left 
{ 
    text-align: left; 
} 

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

Есть ли способ, чтобы более эффективно решать проблемы и задать приоритет для стиля?

спасибо.

Answer 1

Вам нужно всего лишь добавить !important в конце декларации собственности, непосредственно перед точкой с запятой.

Это происходит из-за CSS каскада, и приоритет присваивается ваши селекторы. В вашем случае первый селектор более специфичен, чем второй, поэтому он имеет более высокий приоритет и отменяет его.

В вашем случае два селектора имеют одинаковую специфичность (0,0,1,4), так что последний выигрывает. Как указано в комментариях, вы можете перенести последнее правило перед первым (и, возможно, добавить комментарий, чтобы запомнить себя, почему это правило должно быть перед другим, чтобы не получить снова проблему).

Все объявленные свойства Важные имеют более высокий приоритет, чем нормальный единиц. Для получения более подробной информации ознакомьтесь со спецификациями: http://www.w3.org/TR/CSS21/cascade.html#cascade

Answer 2

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

Есть ряд ресурсов, там для Css старшинства, но вот быстрые освежители:

Universal selectors 
Type selectors 
Class selectors 
Attributes selectors 
Pseudo-classes 
ID selectors 
Inline style 

Более конкретные селекторы будут применены более менее конкретные селекторы. И постарайтесь не сходить с ума, связав их, вы можете повредить производительность браузера, выкладывая страницу.

Update Не уверен, что специфика всего вашего решения, но вы можете эффективно перекрыть ячейки путем добавления идентификатора к столу и .left к тд.

table tbody.center tr td { 
    text-align: center; 
} 

#some_id td.left { 
    text-align: left; 
} 


<table id="some_id"> 
    <tbody class="center"> 
     <tr> 
      <td class="left">Should be left aligned, but is not</td> 
      <td>Center aligned</td> 
     </tr> 
     <tr> 
      <td>long text to stretch the table to be big enough to see the alignment</td> 
      <td>long text to stretch the table to be big enough to see the alignment</td> 
     </tr> 
    </tbody> 
</table> 

Удачи вам!