Question

我正在使用nth-child选择器为不同的社交网站border-color添加list-group-item。但是我尝试了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>

第三个子孩子不工作

1 个答案: