Вложенный div не задан родительским стилем, используя вместо этого стиль *

Question

Я не понимаю, почему самый внутренний вложенный div ниже не того же размера, что и #smaller-size. Это прямой потомок. Это потому, что глобальный стиль * более конкретный? На самом деле это моя кисть. Что мне не хватает? Благодаря!

* { font-size: 15pt; } 
 
#smaller-size { font-size: 0.8em; }

<div> 
 
    This should be the size specified by * (and it is) 
 
    <div id="smaller-size"> 
 
     This should be the smaller size (and it is) 
 
     <div> 
 
      This is nested in #smaller-size, so it should also be smaller (but it's not!) 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Это потому, что глобальный стиль более конкретный?

Нет. Это потому, что оно соответствует элементу, а #smaller-size - нет.

Специфичность имеет значение только тогда, когда оба селектора соответствуют одному элементу.

Если вы не имеете * { font-size: 15pt; } то внутренний DIV будет иметь значение по умолчанию для font-size, который будет что-то вдоль линий 100% (т.е. того же размера, что и родительский элемент).

Возможно, вы должны просто установить размер шрифта на body и наследовать взять случай остальных. Хотя есть несколько моментов:

• управления форм не по умолчанию 100%, так что вы можете явно задать размер для input элементов и т.п.
• В режиме совместимости шрифтов не может наследоваться в таблицы по по умолчанию, поэтому убедитесь, что у вас есть Doctype, который запускает режим стандартов.
• pt - это устройство, предназначенное для физических носителей. Он не отображается точно на экране. Подумайте об использовании другого устройства (например, пикселей).

Answer 2

Да, это потому, что ваш глобальный * стиль. Ваш вложенный div не имеет class или id, и браузер пытается найти первый применимый элемент стиля, и это *.

Answer 3

Специфичность «*» селектор является наименьшим возможным (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 очень хороший пост объяснить, как работает специфика.