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

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

.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会选择每隔一个div。

然后我说> .post意思是选择带有类post的孩子们在这个例子中添加以下样式，background-color。

我希望这很清楚。

Answer 2

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;
}

有关nth-child选择器的更多信息，请参阅：http://nthmaster.com/

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

2 个答案: