Причина приоритета свойства CSS?

Question

На самом деле я знаю, как браузеры отображают следующие примеры (результаты, основанные на Opera 9.5 и Firefox 3.0), но я не понимаю причину, которая стоит за ними.

Возьмите этот пример,

<style type="text/css">
#outer{color:red;}
.inner{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

Результат - синий текст.

Однако, теперь посмотрите на этот пример,

<style type="text/css">
#outer span{color:red;}
.inner span{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

Текст теперь красный.

Наконец, попробуйте это,

<style type="text/css">
#outer span{color:red;}
#inner span{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

Еще раз у нас синий текст.

Есть ли конкретная причина для этой методологии?

(извините за неясный заголовок, это лучшее, что я мог сделать.)

Answer 1

В примере 1 элемент span напрямую не нацелен, поэтому мы должны посмотреть, как обрабатывается Наследование CSS . Цвет является унаследованным свойством, поэтому нам нужно взглянуть на ближайший родительский элемент диапазона, чтобы определить цвет. В вашем примере 1 класс (.inner) имеет определенный синий цвет и передает это наследование в диапазон.

В примере 2 элемент span напрямую нацелен на оба правила, поэтому мы должны заглянуть в CSS Cascade , чтобы определить, какое из правил, нацеленных на элемент, является наиболее специфичным. Правило с селектором идентификаторов выигрывает.

В примере 3 мы снова вызываем правила CSS Cascade, и поскольку обе особенности равны, побеждает последнее правило.

Обратите внимание, что в этой ситуации:

 #outer {color: red; }
 span {color: blue; }

Текст будет синим. Это связано с тем, что второе правило предназначается для элемента напрямую и поэтому не вызывает каскад CSS.

Больше чтения:

• CSS Specific Wars
• Понимание специфики
• CSS для игроков в покер

Примечание и Раскрытие: я написал третий пост в блоге.

Answer 2

W3C имеет подробное объяснение того, как именно CSS должен каскадироваться и иметь приоритет. Для вашей конкретной ситуации это то, что происходит:

1. Хотя «color» является унаследованным свойством, внутренний селектор нацелен на сам диапазон, поэтому он имеет приоритет.

2. Поскольку оба они теперь нацелены на диапазон, то более конкретный (селектор идентификатора) теперь имеет приоритет.

3. Теперь они оба одинаково специфичны, и поэтому объявление, которое появляется позже, имеет приоритет.

Answer 3

Надеюсь, это объяснение поможет:

Пример 1) Поскольку это общие правила, применяется цвет непосредственного родителя .inner

Пример 2) Идентификатор является более конкретным, чем класс (поскольку существует только один элемент с данным идентификатором), поэтому селектор идентификаторов считается более конкретным и важным

Пример 3) Поскольку 2 правила одинаково специфичны, он выбирает последнее правило

Дарко

Answer 4

В первом примере первый стиль применяется к внешнему div. Внутренний div наследует этот стиль, но второй стиль применяется к внутреннему div, поэтому он переопределяет унаследованный стиль

Во втором примере оба стиля применяются к диапазону. Первый стиль имеет приоритет, потому что идентификатор более специфичен, чем класс.

В третьем примере оба стиля также применяются к диапазону. Поскольку они имеют одинаковую специфику, последний стиль имеет приоритет только потому, что он последний.

Вы можете узнать больше о том, как определяется приоритет здесь .

Answer 5

Каскад («C» в CSS) четко определен, чтобы дать четкое определение того, какие правила будут иметь приоритет (включая учет важных, пользовательских и агентских правил).

Но правила также не просты (сложные совпадения с указанием больших иерархий).

Последним этапом каскада является порядок документов объявления с последним выигрышем.