Question

使用CSS和以下示例，是否有办法只选择之后的<ul>？

如果没有，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 + ul { /*...*/ }

然而，当浏览器开始实施CSS4 subject operator：

时，它是可能的

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

与此同时，你将不得不使用jQuery并将DOM推回去。

Answer 2

不，实际上CSS不会帮助你。

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

请看一下：Is there a "previous sibling" CSS selector?

Answer 3

不幸的是，您需要转向使用javascript。你想要的最接近的CSS选择器（相邻的兄弟选择器）将与你想要的完全相反。例如，您可以选择<ul>之后的所有：

p + ul { //style }

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

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

因此，您首先在<ul>之后立即选择所有，然后从中选择之前的。

Answer 4

http://api.jquery.com/prev/

这样的事情对你有用吗？您可能需要向P添加一个类，

但它应该允许你在Uls

之前选择每个选定的元素

示例：

<p class="selected">my p</p>
<ul>My ul</ul>
<script>$("ul").prev(".selected").css("background", "yellow");</script>
</body>

Answer 5

您还可以在ul之前的p之前粘贴一个空的范围并选择：

span + p {
margin-bottom: 0;
}

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

5 个答案: