2014-02-12 2 views
1

Я слежу за this article по особенностям CSS. Он присваивает значения селекторам, а селектор с наивысшей суммой значений имеет приоритет.Специфические CSS: Неожиданное поведение

идентификатор имеет значение 100. класс имеет значение 10.

Моя проблема заключается в этом примере я попытался.

HTML

<div id="id" class="a b c d e f g h i j k l">What color?</div> 

CSS

/* calculated specificity: 100 */ 
#id{ 
    color:red; 
} 

/* calculated specificity: 120 */ 
.a.b.c.d.e.f.g.h.i.j.k.l{ 
    color:green; 
} 

Я ожидал ДИВ быть зеленым, так как 12 классов будет иметь значение 120. Но оно краснеет, когда я запускаю его. Есть ли проблема с моими расчетами?

DEMO

+0

В этой статье он имеет специфику CSS для игроков в покер (что является опрятным), и в нем конкретно говорится: «Так же, как любые три вида ударов любой пары, правила CSS с ID-селекторами били правила любыми количество селекторов классов. 'поэтому не имеет значения, если у вас 20 классов, ID козырьков. – snollygolly

+0

@SLoW, поэтому вся концепция присвоения значений и суммирования их немного бессмысленна, если id всегда превосходит класс. Это правильно? – Sionnach733

+0

Да, лично я бы не стал задавать кучу классов только для переопределения и назначения идентификаторов. Я бы просто дал ему другой идентификатор и избавил себя от некоторых неприятностей. :) – snollygolly

ответ

4

ID козыри класс специфичность в MDN states:

Ниже приведен список селекторов путем увеличения специфичности:

  • Универсальные селекторы
  • Тип селекторов
  • селекторов класса
  • Атрибуты селекторы
  • Псевдо-классы
  • ID селекторы
  • Инлайн стиль

Расчет специфичности может быть немного запутанным, но вы должны помнить, как W3 states, что когда вычисляя специфику, которую вы объединяете, а не добавляете числа вместе.

Так, например:

  • #id имеет специфичность = 0,1,0,0
  • .abcdefghijkl имеет специфичность = 0,0,12,0

Так да, идентификатор будет каждый раз превосходить выбор чистого класса.

+0

Как вентилятор euchre I +1 для использования козыря – Huangism

+0

В этом случае, справедливо ли сказать, что система ценностей ошибочна? – Sionnach733

+0

@ Sionnach733 - Я добавил немного больше объяснений в свой ответ. – j08691

Смежные вопросы