Селектор Css ">" и "display:contents", каков ожидаемый результат?
Я работаю с display:contents CSS в паре с селектором element>element.
Что касается Определение, свойство display:contents:
Makes the container disappear, making the child elements children of the element the next level up in the 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 таким образом нацеливаться на детей?
Проверьте здесь объяснение: bitsofco.de/how-display-contents-works в основном не удаляет элемент, а вместо этого Только показывает содержимое элемента (текстовый узел, дочерние элементы). Также нет, это не относится к другим правилам CSS
Ответы 2
Из официальныйТехнические характеристики:
contents
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).
Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected.
Жирная часть - это ответ, который вы ищете.
Также обратите внимание на предложение: следует рассматривать так, как если бы он был заменен в дереве элементов своим содержимым. Таким образом, элемент на самом деле не удаляется, но чтобы упростить объяснение, это подобно, элемент удаляется и заменяется его содержимым.
PS: избегайте использования www.w3schools.com в качестве официальной ссылки для точного определения, подобного этому. Они могут хорошо объяснять вещи в целом, но не могут дать точного определения.
Я думал отредактировать ваш ответ, чтобы включить визуализацию, но на всякий случай я поместил его в отдельный ответ. Кроме того, я вернулся.
@BoltClock Ах, с возвращением :) .. вы пропустили несколько интересных вопросов, которые могут вам понравиться: stackoverflow.com/q/56238082/8620333 / stackoverflow.com/q/55653761/8620333 / stackoverflow.com/q/56186202/8620333
В дополнение к ответу Темани Афиф, вот визуализация того, как выглядит поддерево коробки для этого элемента с display: contents на .hidden:
<div class='wrapper'>
<div class='child'>I'm a child</div>
<div class='child'>I'm a child</div>
<div class='child'>I'm a child</div>
<div class='child'>I'm a child</div>
</div>
Действительно, он отображается так, как будто самого .hidden не было, а его собственные дети были вместо этого детьми .wrapper (и, в свою очередь, братьями и сестрами собственных детей .wrapper). По сути, это то, что означает display: contents.
Селектор CSS учитывает только структуру DOM без применения к ней CSS. Та же логика, если вы используете
display:noneдля элемента (например, jsfiddle.net/gca6bm9y), так что это логичный и ожидаемый результат.