Css “>” selector and “display:contents”, what is t

问题:

I'm working with CSS' display:contents paired with element>elementselector. As for the definition, the display:contents property:

Makes the container disappear, making the child elements children of the element the next level up in the DOM

So I have this example code:

.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>

I was expecting to have all the childrens with yellow background, because the element>element selector should target them all (they are all at the same level when the property display:contents comes into play).

Why is this not the case? Is the CSS unable to target children in this way?

回答1:

From the official specification:

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.

The bold part is the answer you are looking for.

Also note the sentence: must be treated as if it had been replaced in the element tree by its contents. So the element isn't really removed but to make it easier to explain, it's like the element is removed and replaced by its content.

---

PS: avoid the use www.w3schools.com as an official reference for accurate definition like this. They can be good to explain things in general but will fail to give precise definition.

回答2:

Adding to Temani Afif's answer, here's a visualization of what the box subtree for this element looks like with display: contents on .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>

Indeed, it's rendered as though .hidden itself wasn't there and its own children were instead children of .wrapper (and in turn siblings of .wrapper's own children). That's essentially what display: contents means.