Специфичность «*» селектор является наименьшим возможным (0,0,0,0), но это относится к каждому элементу применимой, так что каждый DIV будет:
* { font-size: 15pt; }
По время вы настраиваете новую специфику с селектором #:
#smaller-size { font-size: 0.8em; }
только элемент с соответствующим селектором будет иметь более высокую специфичность, чем остальные, пострадавший *, на которые все из них. Создание в этом конкретном элементе (0,1,0,0) значения специфичности. Этот идентификатор относится только к этому конкретному элементу.
Если, например, вы укрепите что-то вроде:
#smaller-size>div { font-size: 0.2em }
Тогда все элементы DIV под идентификатором меньшего размера будет иметь более высокую специфичность, чем те, пострадавших от просто *
Создание что-то вроде этого:
<div> -- specificity (0,0,0,0) = 0
<div id="smaller-size"> -- specificity (0,1,0,0) = 100
<div> -- specificity (0,1,0,1) = 101
</div>
</div>
</div>
С этой логикой:
* { font-size: 15pt; }
#smaller-size { font-size: 0.8em; }
#smaller-size>div { font-size: 0.7em; }
#smaller-size>.smaller { font-size: 0.6em; }
<div>
specificity of this element (0,0,0,0) = 0
<div id="smaller-size">
specificity of this element (0,1,0,0) = 100
<div>
specificity of this element (0,1,0,1) = 101
</div>
<div class="smaller">
specificity of this element (0,1,1,1) = 111
</div>
<div class="smaller" style="font-size: 0.5em;">
specificity of this element (1,1,1,1) = 1111
</div>
<p>
specificity of this element (0,0,0,0) = 0
</p>
</div>
</div>
Here очень хороший пост объяснить, как работает специфика.
есть ли причина, по которой вы хотите использовать селектор '*'? Почему бы не определить размер 15pt для тела? Тогда весь контент внутри '.smaller-size' наследует 0.8em –
Если это новый проект, подумайте, как вы определяете свой первоначальный размер шрифта. Если проект слишком далеко (старый проект), попробуйте это: https://jsfiddle.net/egdsfwvL/ – seemly