如果特定元素位于您要选择的元素之后,如何使用CSS来选择元素？

Question

使用CSS和下面的例子,有没有办法只选择<p>后面的<ul>'s？

如果没有,什么是jQuery选择器,还是需要if声明？

<p>Hello there.</p>

<p>Select this para!</p>
<ul>
    <li>list item</li>
</ul>

<ul>
    <li>don't select this list! :)</li>
</ul>

<p>And don't select this paragraph! :)</p>

Answer 1

在CSS3中不可能,你能做的最好的事情就是选择<ul>以下内容<p>:

p + ul { /*...*/ }

但是,当浏览器开始实现CSS4主题运算符时,它是可能的:

!p + ul { /*...*/ }

与此同时,你将不得不使用jQuery并回溯DOM.

Answer 2

不,实际上CSS不会帮助你.

您需要的是以前的兄弟选择器,它不存在.

看看这个:是否有"以前的兄弟"CSS选择器？

Answer 3

不幸的是,您将需要转向JavaScript.你想要的最接近的CSS选择器(相邻的兄弟选择器)将与你想要的完全相反.例如,你可以<ul>在<p>这样之后选择all :

p + ul { //style }

但是你可以在jQuery中进行这样的选择:

$('p + ul').prev('p')

所以你先<ul>紧接着选择所有<p>,然后从中选择前<p>一个.