Select 2 headers 之间的所有元素（具有变量 ID）

Question

我需要 select 一个 header 之后和另一个之前的所有元素，之后什么都没有。

即，我需要 select 1-5，但在此示例中不是“否”：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css"></link>
</head>
<body>
    <h4 id="this-is-bodger">0</h4>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <h3 id="that-is-the-badger">6</h3>
    <p>no</p>
</body>
</html>

我在 CSS 中试过这个，但它突出显示了“否”：

[id^=this-is] ~ p:not([id^=that-is]){
    color: red
}

我该怎么做？

我认为 this 可以，但它突出显示没有。

注：

后半部分id在this-is-和that-is-
我需要在一个声明中做到这一点
不得包含“否”

Answer 1

你可以像下面那样做。 Select 第一个 ID 之后的所有 p 第二个 ID

之后 而不是

[id^=this-is] ~ p:not([id^=that-is] ~ *) {
  color: red
}

<div>
  <h4 id="this-is-bodger">0</h4>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <h3 id="that-is-the-badger">6</h3>
  <p>no</p>
</div>

Select 2 headers 之间的所有元素（具有变量 ID）

Select all elements between 2 headers (with variable ids)

css

css-selectors