Question

我正在使用CSS display:contents和element>element选择器配对。对于the definition，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

来自官方 specification：

内容

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

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

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

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

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

Answer 2

在Temani Afif的答案中，以下是此元素的box子树的可视化效果，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“>”选择器和“ display：contents”，预期结果是什么？

2 个答案: