我正在尝试使用第 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
这可能吗?任何帮助或花絮将不胜感激!
谢谢
最佳答案
你需要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>
关于html - 复杂的 CSS/LESS : Why doesn't this nth-child(even) ~ p work?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35422614/