10

使用 CSS 和下面的例子，有没有办法只选择<p>后面跟着 's 的<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>
4

6 回答 6

14

这在 CSS3 中是不可能的，你能做的最好的就是只选择<ul>下面的<p>：

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

然而，当浏览器开始实现CSS4 主题运算符时，它是可能的：

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

同时，您必须使用 jQuery 并返回 DOM。

于 2013-01-22T23:29:36.260 回答
6

不，实际上 CSS 不会在这方面帮助您。

您需要的是不存在的先前兄弟选择器。

也看看这个：是否有“前一个兄弟”CSS 选择器？

于 2013-01-22T23:23:16.113 回答
6

不幸的是，您将需要使用 javascript。与您想要的最接近的 CSS 选择器（相邻的兄弟选择器）将与您想要的完全相反。例如，您可以<ul>在<p>这样的后面全选：

p + ul { //style }

但是，您可以像这样在 jQuery 中进行选择：

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

因此，您首先<ul>立即选择所有<p>，然后<p>从它们中选择前一个。

于 2013-01-22T23:29:52.307 回答
2

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>
于 2013-01-22T23:28:28.900 回答
2

您还可以在 ul 之前的 p 之前粘贴一个空跨度并选择它：

span + p {
margin-bottom: 0;
}
于 2015-06-23T19:12:55.210 回答
0

使用 :not/:has 选择器（但是没有广泛的支持）

<div>
   <span>first</span>
   <span>second</span>
</div>


div span:not(:last-of-type){
  border: 1px solid red;
}


p:has(+ ul){
  display: block;
  border: 1px solid blue;
}
<div>
<span>first</span>
<span>second</span>
</div>


<div>
<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>
</div>

于 2021-09-03T08:35:12.250 回答