Question

是否有任何CSS选择器用于选择父div，只有它直接包含一个select？

示例代码：

<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>

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

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

Answer 1

如果你正在使用jQuery，那么你可以使用:has：

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

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

Answer 2

您可以使用：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
}

仅当div包含select时才选择div

2 个答案: