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

根据我对您的问题的了解，您想解决.h2段落的同级后面的所有.h3和.h1.current段落，但是您希望其中的任何一个间歇性.h1而不是.current的规则无法解决。

A，这在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)

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

2 个答案: