Css ">" selector and "display:contents", what is the expected result?

Question

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?

Answer 1

根据官方 规格：

内容

元素本身不会生成任何框，但是其子元素和伪元素仍会生成框，并且文本将正常运行。为了进行框生成和布局，必须将元素视为在元素树中已被其内容替换（包括其源文档子元素及其伪元素，例如:: before和:: after）。伪元素，通常在元素的子元素之前/之后生成）。

注意：由于仅影响框树，因此基于文档树的任何语义（例如选择器匹配，事件处理和属性继承）都不会受到影响。

粗体部分是您要寻找的答案。

还要注意以下句子：必须视为在元素树中已被其内容替换。因此，该元素并未真正删除，但为了便于解释，就像该元素已被删除并由其内容替换。

附言：请避免将www.w3schools.com用作此类准确定义的官方参考。他们通常可以很好地解释事物，但无法给出精确的定义。