Question

通过css

选择班级区域中的第一个ul

<div class='area'>
  <div>
   <ul>     
      <li>
         <ul>
      </li>
  </div>
</div>
<div class='area'>
  <div>
   <ul>
      <li>
         <ul>
      </li>
  </div>
</div>
<div class='area'>
  <div>
   <ul>
      <li>
         <ul>
      </li>
  </div>
</div>

我试过这个

'.area > ul'＃由于div和.area

之间的ul，这不起作用

在选择器中选择元素而不引用中间div 是否有不同的方法？

所以，最后我应该只得到3 ul而没有嵌套的ul's

更新

在我的代码的其他一些模板中，第一个ul位于第二级

之后

因此，为了避免选择器混淆，我试图避免inbetween div。

Answer 1

假设您确实拥有有效的HTML，您可以使用* wildcard选择器，该选择器尽可能接近“[not]引用中间div”。那就是说，引用孩子<div>时出了什么问题？：

.area > * > ul {
    // Properties
}

使用> *匹配任何子标记，因此如果这是您的最终目标，它会使您的CSS更加灵活。

对于（可能）两个级别的元素，假设它们是<div>，您可以执行以下操作：

.area > div > ul,
.area > div > div > ul, {
    // Properties
}

Answer 2

'。如果你的html是正确的，区域ul'将是你正在寻找的选择器。

编辑：对不起，html有点令人困惑......我认为那些是</ul>s而且<ul>s与<li>s重叠。

这个问题与我的问题有关： Similar to jQuery .closest() but traversing descendants?

如何从多个div中选择嵌套的第一个ul

2 个答案: