css - 仅当它包含选择时才选择 div

Question

是否有任何 CSS 选择器仅在父 div 内部直接包含选择时才用于选择父 div？

示例代码：

<div class="top_level">
  <input type="radio"></input>
</div>
<div class="top_level">
  <input type="text"></input>
</div>
<div class="top_level">
  <select name="namehere">
    <option>...</option>
    <option>...</option>
    <option>...</option>
  </select>
</div>

假设我只想选择第三个第三top_level类 div，因为它直接在其中包含一个选择，我该怎么做？

我确实试图四处寻找答案，但找不到任何答案。如果可以在 CSS 中选择父级，那会容易得多。

Answer 1

如果您使用的是 jQuery，那么您可以使用:has：

$('div.top_level:has(select)')

如果您只使用 CSS，那么答案很简单：不，您没有任何类似的选择父级。

Answer 2

您可以使用 :empty 伪类来检查您的容器是否为空（不包括换行符）。

您无法检查它是否包含某种类型的元素。但是您也许可以重组您的标记以使用 :empty 选择器

例如：

<div class="top_level">
  <input type="radio"></input>
  <div class="list"></div>
</div>
<div class="top_level">
  <input type="text"></input>
  <div class="list"></div>
</div>
<div class="top_level">
  <div class="list">
  <select name="namehere">
    <option>...</option>
    <option>...</option>
    <option>...</option>
  </select>
</div>
</div>

现在你可以像这样查询

.list:not(:emtpy) {
                // to select all lists that are non-empty
}