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

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

所以上面的选择器所做的是，它开始选择与 #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