Более конкретное правило CSS не работает

Question

В моем следующем коде я определил более конкретное правило для h1 как #inner h1 и менее определенное правило как #container h1.Но если #container h1 ставится после #inner h1, то он вступает в силу, а #inner h1 игнорируется, хотя этого не должно быть, потому что он более конкретен.

Пожалуйста, помогите мне разобраться в проблеме.

CSS:

#inner h1 { font-size:25px; }
#container h1 { font-size:15px; }

HTML:

<div id="container">
  <div id="inner">
    <h1>Hello World!</h1>   
  </div>
</div>

Answer 1

Возможно, ваше представление о специфике немного не в порядке. Специфичность должна быть идеей без контекста: поскольку CSS можно загружать независимо от HTML, вам не нужен HTML-документ, чтобы угадать, какое правило является более «конкретным». Рассмотрим этот другой действительный пример:

<div id="inner">
  <div id="container">
    <h1>Hello World!</h1>   
  </div>
</div>

С этим фрагментом вы должны пойти против вашего первоначального предположения, что inner должно быть более конкретным. Это означает, что для вашей интерпретации необходим контекст (которого нет в CSS).

Дело в том, что оба правила рассматриваются с одинаковой специфичностью (h1 потомки элемента, обозначенного id), и селектор не дает более высокий приоритет более близким потомкам.

В случае применения двух правил одинаковой специфичности, победителем считается последнее, объявленное в CSS.

Answer 2

Они оба имеют одинаковую специфику, и, как вы заметили, порядок их появления в таблице стилей является определяющим фактором для применения правил стиля.

Существует множество способов структурирования правил.чтобы получить больше специфичности, но в целом я бы держался подальше от модификатора !important.

Для получения дополнительной информации см. 6.4.3 Расчет специфичности селектора в спецификации CSS W3.

Answer 3

это совсем не проблема :) CSS анализирует классы один за другим, и последнее правило переопределяет предыдущее, конечно, если предыдущее не является более конкретным или не содержит! Важных операторов, вы можете поместить font-size: 25px! Важный;в первом, так что оно переопределяет последнее правило, иначе просто поменяйте местами классы