如果特定子项仅存在 CSS，如何显示隐藏元素

Question

问题（2018 年）：是否有任何 CSS 结构可以使用选择器隐藏 div，然后取消隐藏包含特定选择器的 div？

---

我把这个标记为骗子

https://stackoverflow.com/questions/53209121/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。

我试过:has()，基于Is there a CSS parent selector?

但截至 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>

Answer 1

正如我所评论的，由于它与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>

这个想法是让文本脱离流，如果有图像，容器将有一个高度，我们将看到带有它的文本。如果没有图像，我们将看不到文字。我还用渐变替换了边框顶部/底部，以避免看到它们的隐藏元素。

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