“显示:内容”属性值是如何工作的？
我正在使用display:contents属性值与一个element > element选择器配对。根据W3Schools，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不能以这种方式针对孩子吗？
回答 2
Stack Overflow用户
发布于 2019-04-30 13:45:51
来自官方 CSSWG 规格说明
内容 元素本身不生成任何框，但是它的子元素和伪元素仍然生成盒子和文本。为了生成框和布局，元素必须被元素树中的内容替换(包括源文档子元素和伪元素，例如:前和:后伪元素，这些元素通常在元素的子元素之前/之后生成)。 注意:由于只有框树受影响，基于文档树的任何语义，如选择器匹配、事件处理和属性继承，都不会影响。..。
大胆的部分(强调我的)是你正在寻找的答案。
还请注意短语：“必须将其视为元素树中的内容已被替换”。因此，元素并不是真正被删除，而是为了更容易解释，就像元素被移除并被其内容替换一样。
PS:避免使用www.w3schools.com作为像这样的精确定义的官方参考。他们可以很好地解释一般的事情，但往往不能给出精确和准确的定义。
Stack Overflow用户
发布于 2019-09-02 06:35:42
添加到Temani Afif的答案中，下面是元素框子树与display: contents on .hidden的可视化
<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>下面是另外两个元素的并行比较，其中一个中间层元素是.hidden
div { padding: 1em; }
.wrapper { display: inline-block; vertical-align: top; background-color: red; margin: 1em; }
.wrapper > div { background-color: orange; }
.hidden { display: contents }
.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>
<div class='wrapper'>
<div>
<div class='child'>I'm a child</div>
<div class='child'>I'm a child</div>
</div>
</div>
实际上，它被呈现为.hidden本身并不存在(在伪代码中被“注释掉”表示)，而它自己的孩子则是.wrapper (以及.wrapper自己的孩子的兄弟姐妹)的孩子。这就是display: contents的本质意思。
https://stackoverflow.com/questions/55922178
复制相似问题
腾讯云开发者
