Css ">" 选择器和 "display:contents"，预期的结果是什么？答案

【问题标题】：Css ">" selector and "display:contents", what is the expected result?Css ">" 选择器和 "display:contents"，预期的结果是什么？
【发布时间】：2019-09-02 14:35:42
【问题描述】：

我正在使用 CSS 的 display:contents 和 element>elementselector。至于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无法以这种方式定位儿童吗？

【问题讨论】：

CSS 选择器只考虑没有应用 CSS 的 DOM 结构。如果您在元素上使用 display:none（例如：jsfiddle.net/gca6bm9y），则逻辑相同，因此这是合乎逻辑的预期结果
查看这里以获得解释：bitsofco.de/how-display-contents-works 基本上它不会取出元素，而是 only 显示元素的内容（文本节点、子节点）。同样不，它不适用于其他 CSS 规则

标签： html css css-selectors

【解决方案1】：

来自官方specification：

内容

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

注意：由于只有箱形树受到影响，任何基于文档树的语义，例如选择器匹配、事件处理和属性继承，都不会受到影响。

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

还请注意以下句子：必须将其视为已在元素树中被其内容替换。所以该元素并没有真正被移除，但为了更容易解释，它就像元素被移除并替换为它的内容。

PS：避免使用www.w3schools.com作为官方参考来准确定义这样的定义。它们可以很好地解释一般事物，但无法给出准确的定义。

【讨论】：

我曾考虑编辑您的答案以包含可视化，但为了安全起见，我将其放在单独的答案中。还有，我回来了。
@BoltClock 啊，欢迎回来 :) .. 你错过了一些你可能喜欢的有趣问题：stackoverflow.com/q/56238082/8620333 / stackoverflow.com/q/55653761/8620333 / stackoverflow.com/q/56186202/8620333

【解决方案2】：

除了 Temani Afif 的回答之外，这是该元素的框子树在.hidden 上的 display: contents 的可视化：

<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 的意思。

【讨论】：