如果特定子项仅存在CSS，如何显示隐藏元素 [英] How to show a hidden element if a specific child exists CSS only

问题描述

问题:在2018年，有没有CSS构造会使用选择器隐藏div，然后取消隐藏包含特定选择器的div?

Question: Is there in 2018 any CSS construct that would hide divs using a selector and then unhide one containing a specific selector?

我将其标记为骗子

CSS选择器:如果容器为空->显示:无；

代码应为

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>

然后我意识到可能还会有另一个用例.

Then I realised that there might be another use case.

隐藏没有特定元素的div.或显示有效果的div.

我尝试过:has()，基于是否有CSS父选择器?

，但截至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中做到这一点:

I can do it in JS easily:

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>

推荐答案

由于这种情况与顺便说一句，我们仍然可以使用某些特定解决方法来显示/隐藏一些元素:

By the way, we can still use some specific workarounds in order to show/hide some elements:

以下是此特定情况的示例:

Here is an example for this particular case:

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，以避免看到隐藏元素.

The idea is to make the text out of the flow and in case there is an image the container will have a height and we will see the text with it. If there is no image, we won't see the text. I also replaced border-top/bottom with gradient to avoid seeing them for the hidden elements.

对于这种特殊情况，这仍然是 hacky 解决方案.

This remain a hacky solution for this particular case.

这篇关于如果特定子项仅存在CSS，如何显示隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！