复杂的 CSS/LESS：为什么这个 nth-child(even) ~ p 不起作用？

Question

我正在尝试使用 nth-child(even) 制作交替模式，其中偶数元素及其各自的一般兄弟是红色的。

但是，经过一段时间的尝试，我无法弄清楚如何使“通用兄弟选择器”与交替颜色的元素具有相同的颜色......

这是一个sn-p：

h1:nth-child(even),
h1:nth-child(even) ~ p {
  color: red;
}

<h1>Section 1</h1>
<p>I am odd.</p>
<p>I am odd.</p>

    
<h1>Section 2</h1>
<p>I am even and I should be red.</p>
<p>I am even and I should be red.</p>

<h1>Section 1</h1>
<p>I am odd.</p>
<p>I am odd.</p>
    
<h1>Section 2</h1>
<p>I am even and I should be red.</p>
<p>I am even and I should be red.</p>

另外，这是 jsbin 中的一个示例： http://jsbin.com/tixobu/edit?html,css,output

这甚至可能吗？任何帮助或花絮将不胜感激！

谢谢

Answer 1

你需要Adjacent sibling selectors而不是General sibling selectors

h1:nth-child(even),
h1:nth-child(even) + p, h1:nth-child(even) + p + p{
  color: red;
}

<h1>Section 1</h1>
<p>I am odd.</p>
<p>I am odd.</p>

    
<h1>Section 2</h1>
<p>I am even and I should be red.</p>
<p>I am even and I should be red.</p>

<h1>Section 1</h1>
<p>I am odd.</p>
<p>I am odd.</p>
    
<h1>Section 2</h1>
<p>I am even and I should be red.</p>
<p>I am even and I should be red.</p>