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/

为什么 nth-child(2n) 不起作用？

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

P.S：我无法更改#entry$ → 它来自 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;
}

有关第 n 个子选择器的更多信息，请参阅：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>

你会注意到我正在 selecting .clearfix div:nth-child(2n) 这意味着在 .clearfix select 内每秒 div.

然后我说 > .post 意思是 select 离子 children 与 class post 添加以下样式，background-color 在这种情况下。

我希望这很清楚。