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

您正在寻找~ general sibling combinator

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle

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开头的选择器列表，并添加{ {1}}到每个连续的选择器，直到 n 次。

例如，如果+ p和p之间只有三个#one元素：
```
#two
```

在选择器4中，假设#one + p, #one + p + p, #one + p + p + p和#one在符合文档中是唯一的，以下选择器是健壮的（即它们适用于任何元素结构，即使它已知改变）：

#two

或

#one ~ p:has(~ #two)

在jQuery和支持它的其他非CSS上下文中使用#one ~ p:not(#two, #two ~ p)，在CSS中使用:has()（其中: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

的元素。

享受纯逻辑

[UPDATE]

对于大多数浏览器：

    :not(#one) {
      color: black /* color for out range */
    }

    #one~* {
      color: red;
    }

    #two~* , #two {
      color: black /* color for out range */
    }

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

4 个答案: