html - 复杂的 CSS/LESS : Why doesn't this nth-child(even) ~ p work?

Question

我正在尝试使用第 nth-child(even) 制作交替模式，其中 even 元素和它各自的一般 sibling 都是红色的。

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

这是一个片段:

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>