使用CSS选择两个id前缀可变的标题之间的所有元素

你之前的写法存在两个问题：

1. 通用兄弟选择符~会匹配第一个标题之后所有同级的<p>，即使中间出现了第二个标题，第二个标题之后的<p>仍然属于第一个标题的后续同级元素，会被选中。
2. 你写的:not([id^=that-is])是排除带有that-is前缀id的<p>，但that-is前缀的id是在第二个标题标签上，而非<p>标签上，所以这个过滤条件完全没有生效。

正确实现代码 #

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

实现逻辑 #

这个选择器的逻辑是：

• 先选中所有id以this-is开头的元素之后的同级<p>
• 再排除掉所有id以that-is开头的元素之后的同级<p>
  最终只会匹配两个标题之间的<p>元素，完全不会选中第二个标题之后的no元素。

该写法完全满足所有限制要求：

• 仅通过id前缀匹配两个标题，不受id后半段可变内容的影响
• 为单条CSS规则
• 自动过滤第二个标题之后的所有<p>元素

内容的提问来源于stack exchange，提问作者Preston