CSS-комбинаторы добавляют специфичность CSS-селектору? - PullRequest
Новая
       89

CSS-комбинаторы добавляют специфичность CSS-селектору?

0 голосов
/ 01 июля 2018

Статья mdn о специфике CSS гласит:

Универсальный селектор (*), комбинаторы (+,>, ~, '') и псевдокласс (отрицание ()) не влияют на специфичность. (Селекторы, объявленные внутри: not (), делают.)

Однако мой опыт показывает, что комбинаторы действительно дают эффект, см. Этот пример: 

div > p {
  color: red;
}

p {
  color: green;
}
<div>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
</div>

Таким образом, приведенная цитата утверждает, что CSS-комбинаторы не влияют на специфичность. Если эта цитата верна, то как она подразумевается тогда, поскольку мой пример кода показывает обратное?

1 Ответ

0 голосов
/ 01 июля 2018

Проблема в вашем фрагменте состоит в том, что у вас есть два селектора (div > p) в первом правиле и во втором правиле только один селектор (p), поэтому первое правило более конкретно, поэтому статья правильна .

См. Фрагмент ниже с использованием тех же 2 селекторов, но первый с комбинатором >, поскольку они имеют ту же специфичность, что и последний, который будет применяться из-за каскадирования. 

div > p {
  color: red;
}

div p {
  color: green;
}
<div>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
</div>

Вы можете увидеть специфику для div p, div > p и p ниже

SS

...