Почему у моего CSS проблемы со специфичностью?

Question

Может кто-нибудь объяснить мне, почему в этом примере первое правило взято не второе? Согласно моим знаниям специфики CSS, вторая более специфична и должна использоваться. Но все браузеры используют в первую очередь.

Пример:

http://apblog.lv/misc/css_spec/example2.html

CSS:

table.data .negative {
  /* css specificity: 0,0,2,1 */
  color: red;
}
table.data tr.inactive td {
  /* css specificity: 0,0,2,3 */
  color: gray; /* this should be used */
}

HTML:

<table class="data">
  <tr class="inactive">
    <td><span class="negative">should be gray</span></td>
  </tr>
</table>

Answer 1

Ваш <span class="negative"> является самым внутренним элементом, также как и тот, который показывает стиль. Ваш <td> может иметь другую настройку цвета, если вы добавите текст вне диапазона, вы увидите, что он серый.

Answer 2

Все ставки отключены относительно правила более высокой специфичности, потому что оно нацелено на TD, а не на SPAN. Ты должен знать, когда их сложить. :-)

---

Редактировать

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

... это правда. Здесь вы найдете пару параграфов: http://www.w3.org/TR/CSS21/cascade.html#inheritance

который гласит,

"... Если цвет [дочернего элемента] не был назначен, [дочерний элемент] будет наследовать цвет родительского элемента ... Когда происходит наследование, элементы наследуют вычисленные значения. Вычисленное значение из родительский элемент становится одновременно указанным значением и вычисленным значением дочернего элемента "

В вашем примере принципы наследования не применяются, поскольку правило CSS предназначается для элемента SPAN непосредственно для свойства color.

Answer 3

Применяются оба правила.

Если вы думаете о правилах, применяемых при переходе вниз по ветвям дерева DOM, то вы найдете одну остановку на TD, в то время как правило .negative перезаписывает ее при поступлении в элемент SPAN.

Чтобы быть более точным, второе правило применяется к TD и всем его дочерним элементам, КОТОРЫЕ ЦВЕТНАЯ СОБСТВЕННОСТЬ МОЖЕТ РАСПРОСТРАНЯТЬСЯ, однако, когда механизм рендеринга попадает в SPAN, первое правило входит в сцену и перезаписывает значение цвета.

Answer 4

Вы правильно рассчитали специфичность для каждого правила, и специфичность второго правила является более высоким значением, чем специфичность первого правила. НО специфичность используется только для «сортировки правил с одинаковой важностью и происхождением ...» (http://www.w3.org/TR/CSS21/cascade.html#cascading-order) Другими словами, специфичность является прерывателем связей, и в этом случае нет связи быть сломанным.

Answer 5

Это не имеет ничего общего с приоритетом CSS. Применяются оба правила, неактивные для td и отрицательные для span, но элемент span находится «над» элементом td в html structore (DOM) и тем самым переопределяет td. Добавьте текст вне диапазона, и вы увидите, что используются оба правила.

Answer 6

Может показаться, что table.data tr.inactive td является более конкретным, но на самом деле table.data .negative потому, что он вызывает класс элемента, в отличие от общего элемента td

Answer 7

Причина, по которой ваши классы не работают должным образом, заключается в том, как вы определяете свои классы в HTML, а не в CSS. Если вы заметили, класс inactive установлен в содержащем элемент <tr>, а затем переопределен классом <span>, «минус». Если вы хотите, чтобы цветовой стиль inactive применялся превыше всего, добавьте! Важный после определения цвета:

 table.data tr.inactive td {
      /* css specificity: 0,0,2,3 */
      color: gray !important; /* this should be used */
 }

Это переопределит стиль negative независимо от

Answer 8

Интервал находится внутри td, поэтому первый селектор на самом деле более специфичен.