CSS选择器（或JavaScript，如果需要）选择DIV的包含至少一个UL的 [英] CSS selector (or JavaScript if needed) for select DIV's which contain at least one UL

问题描述

假设我有这样的层次结构：

Suppose I have a hierarchy like this:

<div class="first_level">
  <div class="second_level_1">
    <div class="third_level_1">
      <div class="fourth_level_1">
        <ul><li></li><li></li></ul>
      </div>
      <div class="fourth_level_2">
        <div class="fifth_level_1">
        </div>
        <div class="fifth_level_2">
          <ul><li></li><li></li></ul>
        </div>
      </div>
    </div>
  </div>
  <div class="second_level_2">
    <ul><li></li><li></li></ul>
  </div>
</div>

我想选择所有的div，其中至少包含一个 ul 。所以在上面的例子代码中，这将是divs second_level_2 ， fourth_level_1 和 fifth_level_2 ..

I want to select all those divs, which contain at least one ul in them. So in the above example code, that would be divs second_level_2, fourth_level_1 and fifth_level_2 ..

我可以使用什么CSS选择器来获得此结果？

What CSS selector can I use to get this result ?

EDIT：

如果单独使用CSS不可能，你可以使用JavaScript建议答案，虽然由于我的实际代码的性质，

If it's not possible with CSS alone, you can suggest answers using JavaScript, although due to the nature of my actual code, I would really like to avoid that if possible ..

jsfiddle

推荐答案

这里有两个选项 - 都有缺点，但你可以考虑：

Here are two options - both have downsides, but you can consider them:

您可以使用 ul 手动添加第二个类到div中：

You can either manually add a second class to the divs with a ul:

<div class="fourth_level_1 div_with_ul_class">

注意：如果您在服务器上使用某种动态语言

Note: If you are using some dynamic language on the server, such as PHP, this could actually be implemented fairly easily, without manual coding.

或者如果你想要动态，我推荐使用jQuery：

Or if you want to be dynamic I recommend jQuery:

$("div > ul").parent().addClass("div_with_ul_class");

这篇关于CSS选择器（或JavaScript，如果需要）选择DIV的包含至少一个UL的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！