问题:在2018年,有没有CSS构造会使用选择器隐藏div,然后取消隐藏包含特定选择器的div?
我将其标记为骗子
CSS Selector: If a Container is empty -> display: none;
代码应为
div { border: 1px solid black; text-align:center; width:400px }
div[id*="accordion_prop_floor_plans"]:empty { display:none }
<div id="accordion_prop_floor_plans_1"></div>
<div id="accordion_prop_floor_plans_2"><img src="https://via.placeholder.com/350x150&text=image" title="image here" /><br/>Plan 2</div>
<div id="accordion_prop_floor_plans_3"></div>
然后我意识到可能还会有另一个用例。
隐藏没有特定元素的div。或显示有效果的div。
我基于Is there a CSS parent selector?尝试了:has()
,但自2018年起,该功能在任何浏览器中均不起作用
div { border: 1px solid black; text-align:center; width:400px }
div[id*="accordion_prop_floor_plans"] { display:none }
div[id*="accordion_prop_floor_plans"]:has(> img) { display:block }
<div id="accordion_prop_floor_plans_1">Plan 1</div>
<div id="accordion_prop_floor_plans_2"><img src="https://via.placeholder.com/350x150&text=image" title="image here" /><br/>Plan 2</div>
<div id="accordion_prop_floor_plans_3">Plan 3</div>
我可以轻松地在JS中做到这一点:
document.querySelector('div[id*="accordion_prop_floor_plans"]>img').parentNode.style.display="block";
div { border: 1px solid black; text-align:center; width:400px }
div[id*="accordion_prop_floor_plans"] { display:none }
<div id="accordion_prop_floor_plans_1">Plan 1</div>
<div id="accordion_prop_floor_plans_2"><img src="https://via.placeholder.com/350x150&text=image" title="image here" /><br/>Plan 2</div>
<div id="accordion_prop_floor_plans_3">Plan 3</div>
答案 0 :(得分:2)
正如我评论的那样,由于这种情况与a parent selector的存在密切相关,因此尚无CSS解决方案。
顺便说一句,我们仍然可以使用某些特定解决方法来显示/隐藏一些元素:
以下是此特定情况的示例:
div {
text-align: center;
width: 400px
}
div[id*="accordion_prop_floor_plans"] {
position:relative;
overflow:hidden;
background:
linear-gradient(#000,#000) top/100% 1px,
linear-gradient(#000,#000) bottom/100% 1px;
background-repeat:no-repeat;
border-right:1px solid;
border-left:1px solid;
}
div[id*="accordion_prop_floor_plans"] img {
margin-top:2px;
margin-bottom:30px;
}
div[id*="accordion_prop_floor_plans"] > div {
position:absolute;
bottom:0;
left:0;
right:0;
}
<div id="accordion_prop_floor_plans_1">
<div>Plan 1</div>
</div>
<div id="accordion_prop_floor_plans_2">
<img src="https://via.placeholder.com/350x150&text=image" title="image here" />
<div>Plan 2</div>
</div>
<div id="accordion_prop_floor_plans_3">
<div>Plan 3</div>
</div>
这个想法是使文本脱离流程,如果有图像,容器将具有高度,我们将看到带有它的文本。如果没有图像,我们将看不到文本。我还用渐变替换了border-top / bottom,以避免看到隐藏元素。
对于这种特殊情况,这仍然是 hacky 解决方案。