Complex CSS/LESS: 为什么这个 nth-child(even) ~ p 不起作用？

Question

我正在尝试使用 nth-child(even) 制作交替模式，其中 even 元素及其相应的一般兄弟姐妹都是红色的。

但是，尝试了一段时间后，我不知道如何使 "general sibling selector" 与交替颜色的元素颜色相同....

这是一个片段：

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

Complex CSS/LESS: 为什么这个 nth-child(even) ~ p 不起作用？

Complex CSS/LESS: Why doesn't this nth-child(even) ~ p work?

html

css

frontend

less