选择 2 个标题之间的所有元素（具有可变 id）答案

【问题标题】：Select all elements between 2 headers (with variable ids)选择 2 个标题之间的所有元素（具有可变 id）
【发布时间】：2021-10-07 08:27:45
【问题描述】：

我需要选择一个标题之后和另一个标题之前的所有元素，然后什么都没有。

即，我需要选择 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 会起作用，但它强调不行。

注意：

后面的ids在this-is-和that-is-之后发生变化
我需要在一份声明中做到这一点
不得包含“否”

【问题讨论】：

嗨，也许添加第二条规则以撤消其余兄弟姐妹的第一条规则[id^=that-is] ~

标签： css css-selectors

【解决方案1】：

你可以像下面那样做。选择第一个 ID 后面不是第二个 ID

的所有 p

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

【讨论】：