如何 select 在嵌套元素之后紧接下一个元素?

How to select immediate next element after nested elements?

我需要将样式应用到紧接在两个嵌套无序列表之后的段落。我知道在一个 ul 之后立即将样式应用于段落的方法是:

.class ul+p 

但我不知道如何缩小范围以仅在两个嵌套的 ul 之后生效?这是我尝试这样做的方法,但它不起作用:

.class ul ul + p 

代码示例:

.class ul + p {
  color:red;
}

.class ul ul {
  color:purple;
}

/* This is just an example of what I tried, does not work */
.class ul ul + p { 
  color:green;
}
<div class="class">
  <ul>
    <li>Item a</li>
    <li>Item b
      <ul>
        <li>Item c (Nested list, CSS for this works fine)</li>
        <li>Iten d (should be purple)</li>
      </ul>
    </li>
  </ul>
  <p>Paragraph after nested ul, this is the one I can't get to work, 
  what kind of CSS would I need? (should be green)</p>
  <ul>
      <li>item e</li>
      <li>item f</li>
  </ul>
  <p>Paragraph after single ul, CSS for this works fine (should be red)</p>
</div>

你的代码说你想定位嵌套无序列表项(蓝色)内的相邻段落,我举了一个例子,它是父 ul 的相邻段落(红色),所以你使用哪个取决于您想要的效果(您没有 post 您的 HTML)。

这里的问题是 CSS 由于全局级联而向内工作,而不是向外工作,所以要以另一种方式做到这一点需要 JavaScript。

(编辑:我编辑了代码,以绿色显示嵌套 ul 的相邻段落)

ul ul + p {
color: blue;
}

ul + p {
color: red;
}

.ul-nested--class + p {
color: green;
}
<ul class="ul-nested--class">
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
<li>
<ul>
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
</ul>
<p>This does validate</p>
<p>This does validate</p>
<p>This does validate</p>
<p>This does validate</p>
</li>
</ul>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>

ul ul + p 不起作用,因为该段落是第一个 ul.

的同级段落

嵌套的 ul,是第一个 ul 的后代,不是 p 的兄弟姐妹。因此,下一个兄弟组合器 (+) 无法按预期运行。

<ul><!-- top level ul; sibling of the parapraph element -->
  <li>Item a</li>
  <li>Item b
    <ul><!-- nested ul; not a sibling of the parapraph element -->
      <li>Item c (Nested list, CSS for this works fine)</li>
      <li>Iten d (should be purple)</li>
    </ul>
  </li>
</ul>
<p>Paragraph after nested ul, this is the one I can't get to work, 
 what CSS would I need? (should be green)</p><!-- sibling of the top level ul -->

对于纯 CSS 解决方案,您需要类似 :has() 伪 class 的东西。选择器可能如下所示:

ul:has(> ul) + p

很遗憾,:has()not yet supported by any major browsers

所以,尝试 JavaScript。

您可以通过为父 ul 元素提供一个 id 或 class 并使用 + 选择器来定位段落来实现这一点。像这样:

#idname/.classname + p {
//Do whatever you want
}