html - 如何用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 段落 段落，但您希望任何遵循非 .current 的间歇性 .h1 的人不被规则处理。

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

但是你可以尝试解决以下 sibling 并将样式恢复为初始值，就像这样。

.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>