如何使用 css 查找一些同级别的元素?

Question

如何使用css查找一些相同级别的元素？

<p class=h1>a</p>
<p class=h2>a1</p>
<p class=h3>a11</p>
<p class=h3>a12</p>
<p class=h2>a2</p>
<p class='h1 current'>b</p>
<p class=h2>b1</p>
<p class=h3>b11</p>
<p class=h3>b12</p>
<p class=h2>b2</p>
<p class=h1>c</p>
<p class=h2>c1</p>
<p class=h2>c2</p>

我想使用 css 获取以下元素，我应该如何找到它？

我试图像这样找到它.current~p:not(.current~.h1~p)，但它失败了。

<p class=h2>b1</p>
<p class=h3>b11</p>
<p class=h3>b12</p>
<p class=h2>b2</p>

Answer 1

根据我对你的问题的理解，你想解决.h1.current段落的兄弟姐妹之后的所有.h2和.h3段落，但你希望任何遵循间歇性.h1的人不是.current，规则不解决。

唉，这在当前的 CSS 层中是不可能的，因为:not()伪类只能接受简单的 CSS 选择器，而不能采用复杂的 CSS 选择器。

但是您可以尝试解决以下同级，并将样式还原为初始值，如下所示。

.h1 {
margin-left: 10px;
text-decoration: underline double orange;
}
.h2 {
margin-left: 30px;
/* *1* */
text-decoration: underline solid green;
}
.h3 {
margin-left: 50px;
/* *2* */
text-decoration: underline overline dashed blue;
}
/* This gets all the followers to .h1.current which are .h2 or .h3 */
.h1.current~.h2,
.h1.current~.h3 {
/* *3* */
text-decoration: line-through double red;
}
/* this gets all .h2 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h2 {
/* overwrite *3* by copying *1* properties */
text-decoration: underline solid green;
}
/* this gets all .h3 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h3 {
/* overwrite *3* by copying *2* properties */
text-decoration: underline overline dashed blue;
}

<p class=h1>a (not this)</p>
<p class=h2>a1 (not this)</p>
<p class=h3>a11 (not this)</p>
<p class=h3>a12 (not this)</p>
<p class=h2>a2 (not this)</p>
<p class='h1 current'>b (this is current)</p>
<p class=h2>b1 (this)</p>
<p class=h3>b11 (this)</p>
<p class=h3>b12 (this)</p>
<p class=h2>b2 (this)</p>
<p class=h1>c (breaks the above chain)</p>
<p class=h2>c1 (not this)</p>
<p class=h3>c21 (not this)</p>
<p class=h3>c22 (not this)</p>
<p class=h2>c2 (not this)</p>

此规则应适用于 CSS4.h1.current ~ p:is(.h2, .h3):not(.h1.current ~ .h1:not(.current) ~ p)但是我们现在不能使用它。然而，jQuery确实支持:not伪类(但不支持:is())中的复杂选择器，所以这里是jQuery支持的相同示例

.h1.current ~ p:not(.h1):not(.h1.current ~ .h1:not(.current) ~ p)

jQuery('.h1.current ~ p.h2:not(.h1.current ~ .h1:not(.current) ~ p), .h1.current ~ p.h3:not(.h1.current ~ .h1:not(.current) ~ p)').css('backgroundColor', 'magenta')

.h1 {
margin-left: 10px;
text-decoration: underline double orange;
}
.h2 {
margin-left: 30px;
/* *1* */
text-decoration: underline solid green;
}
.h3 {
margin-left: 50px;
/* *2* */
text-decoration: underline overline dashed blue;
}
/* This gets all the followers to .h1.current which are .h2 or .h3 */
.h1.current~.h2,
.h1.current~.h3 {
/* *3* */
text-decoration: line-through double red;
}
/* this gets all .h2 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h2 {
/* overwrite *3* by copying *1* properties */
text-decoration: underline solid green;
}
/* this gets all .h3 followers of .h1 which itself follows .h1.current */
.h1.current~.h1~.h3 {
/* overwrite *3* by copying *2* properties */
text-decoration: underline overline dashed blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class=h1>a (not this)</p>
<p class=h2>a1 (not this)</p>
<p class=h3>a11 (not this)</p>
<p class=h3>a12 (not this)</p>
<p class=h2>a2 (not this)</p>
<p class='h1 current'>b (this is current)</p>
<p class=h2>b1 (this)</p>
<p class=h3>b11 (this)</p>
<p class=h3>b12 (this)</p>
<p class=h2>b2 (this)</p>
<p class=h1>c (breaks the above chain)</p>
<p class=h2>c1 (not this)</p>
<p class=h3>c21 (not this)</p>
<p class=h3>c22 (not this)</p>
<p class=h2>c2 (not this)</p>

Answer 2

为什么不是CSS:nth-child()选择器？

p:nth-child(nth)

然后，如果您想使用它来选择多个元素，只需

p:nth-child(1),
p:nth-child(2),
p:nth-child(3)