如何选择两个元素之间的所有元素？

Question

如果有此HTML，如何选择#one和#two之间的所有元素用CSS？我不能使用jQuery。

<p id="one"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="two"></p>

Answer 1

#one ~ p:not(#two) {
  color: red;
}

所以上面的选择器所做的是，它开始选择与p相邻的所有#one元素，直到#two，然后，我使用:not()伪排除最后一个p：

#one ~ p:not(#two) {
    color: red;
}

<p id="one">0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="two">6</p>

Answer 2

给出两个同级元素（即具有相同的父元素），如果元素的结构未知（或已知会发生变化），则在选择器3中无法编写与它们之间的元素匹配的选择器。

在选择器3中，只有以下两个条件中的一个或两个都成立时，才能匹配它们之间的元素：

两个元素相对于其父元素的树位置是已知的。
例如，如果#one始终是第一个孩子，#two始终是最后一个孩子，这很容易：
```
#one ~ p:not(#two)
```
或
```
#one ~ p:not(:last-child)
```
（（请注意，我不包括:not(:first-child)，因为~组合器已经确保了第一个匹配元素永远不会是第一个子元素-您可能希望将其包括在内，以实现额外的特异性甚至是为了清楚起见。）
如果#one始终是第二个孩子，#two始终是第五个孩子：
```
#one ~ p:not(:nth-child(-n+2)):not(:nth-child(n+5))
```
如果#one始终是第二个孩子，而#two始终是倒数第三个孩子：
```
#one ~ p:not(:nth-child(-n+2)):not(:nth-last-child(-n+3))
```
要匹配的元素数。
请注意，如果＃1为真，则应使用＃1中描述的技术，而不是此处。以下技术非常繁琐，并且在＃1不正确的情况下是不得已的选择。
如果在#one和#two之间只有n个元素，则需要构建一个以#one开头的选择器列表，将+ p添加到每个后续选择器中，直到 n次。
例如，如果p和#one之间仅存在三个#two元素：
```
#one + p,
#one + p + p,
#one + p + p + p
```

在选择器4中，假设#one和#two在一致的文档中是唯一的，以下选择器是可靠的（即，它们适用于元素的任何结构，即使已知会发生变化）：

#one ~ p:has(~ #two)

或

#one ~ p:not(#two, #two ~ p)

在jQuery和支持它的其他非CSS上下文中使用:has()，在CSS中使用:not()（不希望使用:has()组合器的~）。后者目前为works in Safari；目前尚不清楚它何时会在其他浏览器中发布。

Answer 3

您可以将元素包装在div元素中，并为div分配一个ID，然后在CSS文件中使用该ID选择标记内的内容。

<div id="ID">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

#id {
    color:red;
}

<p>1</p>
<div id="id">
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
<p>6</p>

Answer 4

    #one ~ :not(#two~*):not(#two)

选择＃one之前的所有元素，但＃two之前的所有元素，而不是＃two]

纯逻辑，享受它