CSS Wildcard Selector - Нет переопределения? - PullRequest
Новая
       99

CSS Wildcard Selector - Нет переопределения?

0 голосов
/ 12 декабря 2018

Может кто-нибудь сказать мне, почему последний промежуток пунктир?Почему он не перезаписан?

Вилка с ручкой https://codepen.io/anon/pen/pqjREd

div div div * span {
  border: double;
}

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

div {
  border: none;
}
<div>
  Line 1
  <br>
  <span>Line 2</span>
  <br>
  <div>
    Line 3
    <br>
    <span>Line 4</span>
    <br>
    <div>
      Line 5
      <br>
      <span>Line 6</span>
      <br>
    </div>
  </div>

</div>

1 Ответ

0 голосов
/ 12 декабря 2018

Давайте разберем это правило по правилу.

Предположим, что вы уже слышали о специфичности термина, как уже упоминали другие в комментариях.Но давайте предположим, что вы ничего не знаете об этом, кроме того, что это как-то связано с вашей проблемой, или что вы прочитали предоставленные вам ссылки, но у вас возникли проблемы с применением этих знаний для этой конкретной проблемы.

Для начала, специфичность учитывает только те селекторы, которые соответствуют элементу для начала.Поскольку div и span - это две разные вещи, последнее правило не имеет значения, поэтому давайте избавимся от него: 

div div div * span {
  border: double;
}

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

Теперь у нас есть три правила, два из которых запрашивают span конкретно, а третий - любой элемент.

Первое правило, div div div * span, не соответствует элементу "Строка 6", потому что его предки div поднимаются только до трех уровней.Четвертого уровня между самым внутренним div и span не существует, и родительский элемент самого внешнего div является не другим div, а body.Итак, единственные два правила, которые на самом деле соответствуют этому элементу: 

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

Теперь мы можем говорить о специфике.Универсальный селектор * имеет нулевую специфичность.Все ваши правила имеют только селекторы типа и / или универсальные селекторы, поэтому вычислить их специфичность довольно просто: 

div * * span /* 2 types -> specificity = (0, 0, 2) */
div *        /* 1 type  -> specificity = (0, 0, 1) */

В заключение, поскольку правило пунктирной границы является более конкретным, правило пунктирной границы непереопределить его.

...