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

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 ~ :not( #two ~ * ):not( #two )

选择所有在 #one 之前但不在 #two 之前且不是 #two

的元素

纯逻辑，尽情享受吧

[更新]

对于大多数浏览器：

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

    #one~* {
      color: red;
    }

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

Answer 2

~ general sibling combinator 就是您要找的东西

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

所以上面的选择器所做的是，它开始选择与#one 相邻的所有p 元素，直到#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>

JSFiddle

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

给定两个兄弟元素（即具有相同的父元素），如果元素的结构未知（或已知会改变），则在 Selectors 3 中无法编写匹配它们之间的元素的选择器.

在 Selectors 3 中，只有满足以下条件之一或两者都为真时，才能匹配它们之间的元素：

1. 两个元素相对于其父元素的树位置是已知的。

   例如，如果#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))
   

2. 要匹配的元素数量是已知的。

   请注意，如果 #1 为真，您应该使用 #1 中描述的技术，而不是此处。以下技术非常乏味，并且是当 #1 不正确时的最后手段。

   如果#one 和#two 之间只有n 个元素，则需要构建一个以#one 开头的选择器列表，将+ p 添加到每个连续的选择器最多 n 次。

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

   #one + p,
   #one + p + p,
   #one + p + p + p
   

在选择器 4 中，假设 #one 和 #two 在符合标准的文档中是唯一的，以下选择器是稳健的（即它们适用于任何元素结构，即使已知会发生变化 em>):

#one ~ p:has(~ #two)

或

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

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