nth-child（2n）不起作用？

Question

有什么不对的代码：

HTML

<div class="clearfix"> 
    <div id="entry1"> 
    <div class="post"></div> 
    </div> 
    <div id="entry2"> 
    <div class="post"></div> 
    </div> 
    <div id="entry3"> 
    <div class="post"></div> 
    </div> 
    <div id="entry4"> 
    <div class="post"></div> 
    </div> 
    <div id="entry5"> 
    <div class="post"></div> 
    </div> 
    <div id="entry6"> 
    <div class="post"></div> 
    </div> 
</div> 

CSS

.post { 
    width: 100px; 
    height: 100px; 
    margin-right: 10px; 
    float: left; 
    background-color: #222; 
} 

.post:nth-child(2n) { 
    background-color: red; 
} 

FIDDLE→https://jsfiddle.net/twvxzhwm/

为什么没有按't nth-child(2n)工作？

我应该怎么做才能修复它？

P.S：我不能改变＃条目$→它来自CMS。 我只能使用CSS或JS。

Answer 1

nthchild是一个非常具体的CSS规则，可以用很多方式。

例如：

我的HTML：

<ul class='item-container my-class'> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
    </ul> 

选择第一5个元素：

.my-class > * :nth-child(-n+5) { 
    display: block; 
} 

选择第五元件：上

.my-class > * :nth-child(5) { 
    display: block; 
} 

有关详细信息然后th-child选择器请参阅：http://nthmaster.com/

Answer 2

这是因为他们不是直接兄弟姐妹，你有正确的想法，但这是你可以解决它的一种方法。

.post { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-right: 10px; 
 
    float: left; 
 
    background-color: #222; 
 
} 
 
.clearfix div:nth-child(2n) > .post { 
 
    background-color: red; 
 
}

<div class="clearfix"> 
 
    <div id="entry1"> 
 
    <div class="post"></div> 
 
    </div> 
 
    <div id="entry2"> 
 
    <div class="post"></div> 
 
    </div> 
 
    <div id="entry3"> 
 
    <div class="post"></div> 
 
    </div> 
 
    <div id="entry4"> 
 
    <div class="post"></div> 
 
    </div> 
 
    <div id="entry5"> 
 
    <div class="post"></div> 
 
    </div> 
 
    <div id="entry6"> 
 
    <div class="post"></div> 
 
    </div> 
 
</div>

你会发现我选择.clearfix div:nth-child(2n)这意味着.clearfix内选择每秒格。

然后，我要说的是> .post意思是，选择子类的职位后添加以下样式，背景色在这个实例中。

我希望这很清楚。