选择另一个元素的前3个兄弟元素（<p>）（</p> <h2>）

Question

如何使用CSS选择前3个[Fish fingers with sour cream sauce, Vegetable casserole with salad cheese, Chicken and nacho salad] 标签的所有$source_array = array( array( 'id' => 1, 'name' => 'chimpanzee', 'address' = 'Singapore' ), array( 'id' => 2, 'name' => 'meeting', 'address' = 'USA' ), array( 'id' => 3, 'name' => 'dynasty', 'address' = 'Singapore' ), array( 'id' => 4, 'name' => 'chocolate', 'address' = 'Netherland' ), array( 'id' => 5, 'name' => 'bananas', 'address' = 'Singapore' ), array( 'id' => 6, 'name' => 'fantasy', 'address' = 'USA' ), array( 'id' => 7, 'name' => 'football', 'address' = 'England'), ); $sorted_array = array(); foreach ( $source_array as $idx => $entry ) { // Check if country already has a array if ( ! isset( $sorted_array[ $entry['address'] ] ) ) { $sorted_array[ $entry['address'] ] = array(); } $sorted_array[ $entry['address'] ][ $idx ] = $entry; } 个标签？

带有“one”，“two”，“three”文本的标签应为红色，但不应选择文本“4”和“5”。

这是我的示例代码，但我不确定CSS选择器应该是什么样子。

<p>

<h2>

Answer 1

如果您真的必须选择前三个p元素后面的所有h2元素，则必须使用与p元素相匹配的复杂选择器。标准 - 没有两种方式。选择器不提供用于匹配跟随另一个元素的n个元素的伪类，也不提供用于匹配两个其他元素之间的元素的伪类（例如，您不能编写匹配{{之间的所有元素的选择器）。 1}}和h2:nth-of-type(3)）。

h2:nth-of-type(4)

.container h2:nth-of-type(-n+3) + p,
.container h2:nth-of-type(-n+3) + p + p,
.container h2:nth-of-type(-n+3) + p + p + p {
  color: red
}

如果覆盖不是不可能的，那么它变得更容易 - 你可以简单地用不同的选择器覆盖它：

<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

.container h2 ~ p {
  color: red
}

.container h2:nth-of-type(4) ~ p {
  color: currentColor
}

Answer 2

使用:nth-of-type()

段

.container h2:nth-of-type(-n+3) + p {
  color: red
}

<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

要选择全部而不是相邻的p到h2，您需要更复杂的选择器：

段

.container h2:nth-of-type(-n+3) + p,
.container h2:nth-of-type(-n+3) + p + p,
.container h2:nth-of-type(-n+3) + p + p + p {
  color: red
}

<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

Answer 3

由于问题澄清而被编辑：

正如BoltClock所说，没有选择器。但是你可以转过来，在第四个<p>之后选择所有<h2>，并使它们不是红色：

＆＃13;

＆＃13;

.container p {
  color: red;
}
.container h2:nth-of-type(4) ~ p {
  color: inherit;
}

＆＃13;

<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

＆＃13;

＆＃13;

＆＃13;