Правило CSS не переопределено

Question

У меня возникла странная проблема, когда правило CSS, похоже, не применяется правильно в Safari/Chrome/Firefox на Mac.

Учитывая следующий HTML-код:

<table id="table" border="1"> 
    <tr> 
     <td id="cell"> 
      Hello 
     </td> 
    </tr> 
</table> 

Тогда следующий код CSS работает, как я ожидал (как в камере не имеет отступы сверху):

td { padding: 10px; } 
#cell { padding-top: 0px; } 

Но этот не:

#table td { padding: 10px; } 
#cell { padding-top: 0px; } 

(Попробуйте его в Интернете по адресу: http://jsfiddle.net/xkduyk7m/)

Я ожидал, что обе версии CSS принесут тот же эффект в этом случае, но во втором случае правило, которое добавлено позже и которое относится к конкретной ячейке, не отменяет первое правило.

Почему?

Answer 1

Каждый селектор css имеет значение «вес». Комбинация делает ее переопределяющей, и когда они совпадают, порядок записи определит приоритет.

Вот документы W3 о том, как рассчитать преимущество: http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 2

Правила Css не связаны между собой. Более конкретный селектор css переопределит другой менее конкретный. Место используется только в том случае, если они являются как конкретными.

В вашем случае #table td является более конкретным, чем только #cell и, следовательно, не переопределяется. Если вы используете #table #cell, он должен работать

Answer 3

Ваша проблема в том, что #table тд {обивка: 10px; } выберется как #table td {padding-top: 10px; обивка-направо: 10px; обивка-дно: 10px; обивка налево: 10px; } в браузере. И этот приоритет над вашим #cell {padding-top: 0px; }. попробуйте один из парованием 2 варианта

Вариант 1

#table td { padding: 10px 10px 10px 10px; } 
#table #cell { padding: 0px 10px 10px 10px; } 

Вариант 2

#table td { padding: 10px; } 
#table #cell { padding-top: 0px !important; } 

Извините за жирный шрифт, используя переполнение стека приложение для Android и хэш делает его смелым жаль что