如何选择嵌套元素后的下一个元素

Question

我需要将样式应用于紧跟在两个嵌套无序列表之后的段落。我知道在一个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>

Answer 1

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()伪类的东西。选择器可能看起来像这样：

ul:has(> ul) + p

不幸的是，:has()还没有得到任何主流浏览器的支持。

所以，试试JavaScript。

Answer 2

您的代码说您想将目标锁定在嵌套无序列表项(蓝色(内的相邻段落，我举了一个例子，它是父ul(红色(的相邻段落。因此，您使用哪一个取决于您想要的效果(您没有发布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>

Answer 3

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

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