时间戳

首页 > 解决方案 > 选择 2 个标题之间的所有元素（具有可变 id）

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

问题描述

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

即，我需要选择 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
}

我怎样才能做到这一点？

我认为这会起作用，但它强调没有。

笔记：

标签： csscss-selectors

解决方案

你可以像下面那样做。选择p第一个 ID之后不在第二个 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>

推荐阅读