Css ">" селектор и "display: contents", каков ожидаемый результат?

Question

Я работаю с CSS display:contents в сочетании с селектором element>element.Что касается определения , свойство display:contents:

Делает контейнер исчезающим, делает дочерние элементы дочерними для элемента на следующий уровень в DOM

Итак, у меня есть пример кода:

.wrapper {
  background-color: red;
}

.hidden {
  display: contents;
}

.wrapper > .child {
  background-color: yellow;
}

<div class='wrapper'>
  <div class='hidden'>
    <div class='child'>I'm a child</div>
    <div class='child'>I'm a child</div>
  </div>

  <div class='child'>I'm a child</div>
  <div class='child'>I'm a child</div>
</div>

Я ожидал иметь всех детей с желтым фоном, потому что селектор element>element должен быть нацелен на них всех (все они находятся на одном уровне, когдасвойство display:contents входит в игру).

Почему это не так?Неужели CSS не может нацелить детей таким образом?

Answer 1

Из официальной спецификации :

содержимое

Сам элемент не генерирует никаких блоков, но его дочерние элементы и псевдо-элементы по-прежнему генерируют поля и текст работает как обычно.В целях генерации и макета блока элемент должен обрабатываться так, как если бы он был заменен в дереве элементов его содержимым (включая его дочерние элементы исходного документа и его псевдоэлементы, такие как :: before и :: afterпсевдоэлементы, которые генерируются до / после дочерних элементов элемента как обычно).

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

Жирная часть - это ответ, который вы ищете.

Также обратите внимание на предложение: должно бытьобрабатывается так, как если бы оно было заменено в дереве элементов его содержимым .Таким образом, элемент на самом деле не удален, но для упрощения объяснения, он похож на , элемент удален и заменен его содержимым.

---

PS: избегайте использования www.w3schools.com в качестве официального справочника для точного определения, подобного этому.Они могут быть хорошими для объяснения вещей в целом, но не дадут точного определения.