Наследование CSS против специфичности CSS - PullRequest
Новая
       80

Наследование CSS против специфичности CSS

2 голосов
/ 02 октября 2019

Я учился на уроке веб-разработки в своем факультете компьютерных наук в университете, и учитель спросил у класса: «Почему правило выбора класса применяется над правилом выбора тега (см. Пример кода)?». Я ответил, что это из-за специфики CSS, и мне сказали, что я был неправ. Он хотел получить ответ из-за наследования CSS.

Хотя это правда, почему специфика CSS неверный ответ? 

p {
   color: red;
}

.section {
   color: green;
}

<p class="section">Section</p>

1 Ответ

0 голосов
/ 02 октября 2019

Как я уже сказал в комментарии, я считаю, что вы были правы: наследование в CSS связано с иерархией DOM. Некоторые стили наследуются от родительских элементов.

Специфичность связана с тем, какие правила CSS имеют приоритет над другими правилами CSS. Ниже приведены некоторые примеры. 

.container {
  font-size: 35px;
}

p {
  color: red;
}

.section {
  color: green;
}

div.section {
  /* More specific then .section rule */
  color: purple;
}
<div class="container">
  <p>
    Example of inheritance. This paragraph has inherited the font-size of its parent.
    <span>This span also inherited font-size.</span>
  </p>
</div>

<div>
  <p class="section">
    Example of specificity. The "section" class is more specific than the rule created for the p element. Therefore, styles defioned in the "section" class rule may override those defined in the p element rule.
  </p>
  
  <p>
    No class applied.
  </p>
  
  <div class="section">
    The "div.section" rule is more specific than the ".section" rule, so this text is purple.
  </div>
</div>
...