Правила оценки и оценки специфичности - PullRequest
Новая
       20

Правила оценки и оценки специфичности

1 голос
/ 16 февраля 2012

В моей таблице стилей есть два конкурирующих правила: 

#parent > div {
    color: blue;
}

#child {
    color: red;
}

Вот соответствующий HTML-код: 

<div id="parent">
 <div id="child">What color is this text?</div>
 <div>This should just be blue</div>
 <div>Also should be blue</div>
</div>

Почему #child синий, а не красный?

Я не уверен, правильно ли я применяю систему подсчета очков.Вот как я это сделал:

  • правило # 1 имеет идентификатор и тег, поэтому его оценка равна [0, 1, 0, 1]
  • правило № 2 имеет только идентификатор, поэтому его оценка равна[0, 1, 0, 0]
  • , поэтому правило # 1 выигрывает, и оно синее

Но это кажется мне неправильным - первое правило соответствует нескольким элементам;второе правило может соответствовать только одному!Так не является ли второе правило более конкретным?

1 Ответ

2 голосов
/ 16 февраля 2012

Но это мне кажется неправильным - первое правило соответствует нескольким элементам; второе правило может соответствовать только одному! Так не является ли второе правило более конкретным?

Совсем нет. Тот факт, что селектор соответствует меньшему количеству элементов, не делает его более конкретным.

Сопоставление селектора выполняется по элементам, а не по правилам. Так как есть более конкретный селектор, который соответствует вашему элементу #child, который равен #parent > div, это правило имеет приоритет, и все.

Это кажется нелогичным, но так оно и есть. Одним из способов решения этой проблемы является добавление #parent к вашему второму правилу: 

#parent > div {
    color: blue;
}

#parent > #child {
    color: red;
}
...