第三个孩子不工作[重复]

Question

我正在使用nth-child 选择器为不同的社交list-group-item 添加border-color。但我尝试nth-child 第三个不起作用我做错了什么？

.new-class:nth-child(1n) .list-group-item {
  border-right: 3px solid yellow;
}

.new-class:nth-child(2n) .list-group-item {
  border-right: 3px solid red;
}

.new-class:nth-child(3n) .list-group-item {
  border-right: 3px solid green;
}

.new-class:nth-child(4) .list-group-item {
  border-right: 3px solid blue;
}

.new-class:nth-child(5) .list-group-item {
  border-right: 3px solid brown;
}

.new-class:nth-child(6) .list-group-item {
  border-right: 3px solid red;
}

<div class="row">
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/apple">Apple</a></span>
    </div>
  </div>

  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/microsoft">Microsoft</a></span>
    </div>
  </div>

  <div class="clearfix visible-sm-block"></div>
  <div class="clearfix visible-lg-block"></div>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/yahoo">Yahoo</a></span>
    </div>
  </div>

  <div class="clearfix visible-md-block"></div>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/google">Google</a></span>
    </div>
  </div>

  <div class="clearfix visible-sm-block"></div>
  <div class="clearfix visible-lg-block"></div>
</div>

Answer 1

首先 - 你把 nth-child 和 nth-of-type 混淆了：

• nth-child 根据元素在一组兄弟中的位置匹配元素
• nth-of-type 匹配给定类型的元素，基于它们在一组兄弟姐妹中的位置

到目前为止，还没有 nth-of-class 选择器，因此 nth-child 和 nth-of-type 在布局中将无法正常工作。

但是有一个解决方法：给每个 .clearfix 元素另一种类型，p 在下面的示例中：

.new-class:nth-of-type(1n) .list-group-item {
  border-right: 3px solid yellow;
}

.new-class:nth-of-type(2n) .list-group-item {
  border-right: 3px solid red;
}

.new-class:nth-of-type(3n) .list-group-item {
  border-right: 3px solid green;
}

.new-class:nth-of-type(4n) .list-group-item {
  border-right: 3px solid blue;
}

p.clearfix {
  margin: 0;
}

<div class="row">
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/apple">Apple</a></span>
    </div>
  </div>

  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/microsoft">Microsoft</a></span>
    </div>
  </div>

  <p class="clearfix visible-sm-block"></p>
  <p class="clearfix visible-lg-block"></p>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/yahoo">Yahoo</a></span>
    </div>
  </div>

  <p class="clearfix visible-md-block"></p>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/google">Google</a></span>
    </div>
  </div>

  <p class="clearfix visible-sm-block"></p>
  <p class="clearfix visible-lg-block"></p>
</div>