注意：请参阅下文，以获取更清晰的说明我试图弄清楚为什么会这样。jsFiddle 1 - Before的HTML<div class="chicken"> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div></div>的CSS.chicken { width:100%; background:#999; float:left; }.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }.big-chix:nth-child(2n+1) { background-color:#eee; }.big-chix:nth-child(2n+2) { background-color:#aaa; }我要在这里实现的目的是为第n个孩子1、3、5 ...和2、4、6 ...的.big-chix类设置不同的背景。但是，当我输入一个段落（或其他类似div的东西）时，它变成这样：jsFiddle 2 - After的HTML<div class="chicken"> <p>paragraphy</p> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div> <div class="big-chix">Contento</div></div>的CSS.chicken { width:100%; background:#999; float:left; }.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }.big-chix:nth-child(2n+1) { background-color:#eee; }.big-chix:nth-child(2n+2) { background-color:#aaa; }第n个子元素放置位置切换。为什么会这样呢？ .big-chix:nth-child()不仅要选择所有.big-chix类（即6个.big-chix），然后将1、3、5设置为background-color的#eee，然后将2、4、6设置为？编辑：根据我的收集，#aaa不适用于像这样的代码中元素父级中的元素子级：jsFiddle - nth-child(1) when nth-child paragraph is the first element的HTML<div class="chicken"> <p>paragraphy</p> [this is nth-child(1)] <div class="big-chix">Contento</div> [this is nth-child(2)] <div class="big-chix">Contento</div> [this is nth-child(3)] <div class="big-chix">Contento</div> [this is nth-child(4)] <div class="big-chix">Contento</div> [this is nth-child(5)] <div class="big-chix">Contento</div> [this is nth-child(6)] <div class="big-chix">Contento</div> [this is nth-child(7)]</div>的CSS.chicken { width:100%; background:#999; float:left; }.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }.big-chix:nth-child(1) { background-color:#eee; }但是，它将在以<p>作为第一个元素的父元素中工作。jsFiddle - nth-child with .big-chix as the first element的HTML<div class="chicken"> <div class="big-chix">Contento</div> [this is nth-child(1)] <p>paragraphy</p> [this is nth-child(2)] <div class="big-chix">Contento</div> [this is nth-child(3)] <div class="big-chix">Contento</div> [this is nth-child(4)] <div class="big-chix">Contento</div> [this is nth-child(5)] <div class="big-chix">Contento</div> [this is nth-child(6)] <div class="big-chix">Contento</div> [this is nth-child(7)]</div>的CSS.chicken { width:100%; background:#999; float:left; }.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }.big-chix:nth-child(1) { background-color:#eee; } (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 不是.big-chix：nth-child（）仅假定选择所有.big-chix类（即6 .big-chix），然后将1、3、5设置为#eee的背景色，和2、4、6到#aaa？没有。:nth-child()选择“父元素中的第n个元素”，而不是“也与选择器的其他部分匹配的第n个元素”。每个选择器都是独立应用的，只有匹配所有组件的元素才会匹配完整的选择器。但是请注意，有:nth-of-type()应该可以执行您想要的操作。 (adsbygoogle = window.adsbygoogle || []).push({});
