“显示:内容”属性值是如何工作的？
“显示:内容”属性值是如何工作的？
提问于 2019-04-30 13:37:59
我正在使用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不能以这种方式针对孩子吗？
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的本质意思。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55922178
复制相关文章
相似问题
腾讯云开发者
