2016-12-07 11 views
1

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

* { 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>

+0

есть ли причина, по которой вы хотите использовать селектор '*'? Почему бы не определить размер 15pt для тела? Тогда весь контент внутри '.smaller-size' наследует 0.8em –

+0

Если это новый проект, подумайте, как вы определяете свой первоначальный размер шрифта. Если проект слишком далеко (старый проект), попробуйте это: https://jsfiddle.net/egdsfwvL/ – seemly

ответ

0

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

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

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

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

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

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

Отличное объяснение. Я не совсем понял концепцию значений по умолчанию и идею о том, что элементы без стиля, непосредственно примененные, просто принимают эти значения. В случае размера шрифта полезно знать, что значение по умолчанию - «100%» (я всегда считал, что это «inherit»). –

0

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

+0

Он не использует первый применимый, он использует наиболее конкретный. В этом случае есть только один, который совпадает вообще. – Quentin

+0

@Quentin Да, вы правы, я использовал неправильное слово. –

1

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