«*» появляется в особенности CSS, почему?

Question

У меня возникли проблемы с пониманием того, почему мой CSS не оформлен в соответствии с тем, как я понимаю правила специфики. Согласно моему чтению через Интернет (в том числе this calculator), * (соответствует всем) не имеет специфичности, в то время как элемент (например, h1, h2 и т. Д.) Имеет четвертое место, в то время как класс является третьим по важности. Но это не то, что я вижу в отладчике Chrome.

Судя по ним, * вышел на первое место, после чего h5, а затем еще два * матчи, а затем матч для класса .orange. Разве не должно быть * после всего остального? И не должен ли выигрывать .orange над h5? Что происходит?

Answer 1

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

Другие стили только унаследованы определениями других элементов. Эти другие элементы находятся в родительском контексте с вашим элементом.

Согласно скриншоту, он должен быть some-element внутри структуры, как это:

<div class="row orange"> 
    <div class="col-xs-10"> 
     <h5 class="detail1"> 
      <some-element></some-element> 

Что касается вашего элемента, унаследованные стили не имеет какие-либо специфичности вообще. Специфика - это понятие, которое относится к CSS-селекторы, а не Свойства CSS.

Specificity of inherited CSS properties