使用 nth-child 和 Bootstrap 仅使用 CSS 选择偶数元素答案

【问题标题】：Using nth-child and Bootstrap to select even elements with just CSS使用 nth-child 和 Bootstrap 仅使用 CSS 选择偶数元素
【发布时间】：2018-06-13 19:33:40
【问题描述】：

当我不使用引导程序时，此设置工作得很好。但是当我将它全部包装在引导程序中时，它就会停止工作。我该如何解决？

<style>
.card {
  margin: 30px auto;
  padding: 20px 40px 40px;
  width: 450px;
  height: 450px;
  text-align: center;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}
.card:hover {
  border-color: #75dcff;
}

.card:nth-child(even):hover {
  border-color: #ff7c5e;
}
</style>

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

工作得很好，但是当我使用引导程序时。它停止工作。我试过选择 .row 和 .col-s6 但我似乎无法让它工作。使用 .card:nth-child)even):hover 可以将所有 div 更改为相同的颜色。

<div class="container">
  <div class="row">

    <div class="col-s6 col-sm">
      <div class="card projects">
      <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
      <a href="#">
        <img src="#">
      </a>
    </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
      <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
      <a href="#">
        <img src="#">
      </a>
    </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
      <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
      <a href="#">
        <img src="#">
      </a>
    </div>
    </div> 

  </div>
</div>

我不知道我需要使用什么元素或类。有人告诉我，我没有上课。但是如果 div 上的类是 card 并且我在我的 CSS 文件中选择 .card 是不是我选择了一个类？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您的问题是每个.card 都包装在自己的.col-s6.col-sm div 中。

所以现在每张卡片都是其容器的第一个孩子，其中一个当然是奇数。

您要做的是使用:nth-child(even) 选择容器元素，然后将悬停添加到该选择中的卡片。

.col-sm:nth-child(even) .card:hover {
  background-color: red;
}

<div class="container">
  <div class="row">

    <div class="col-s6 col-sm">
      <div class="card projects">
      <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
      <a href="#">
        <img src="#">
      </a>
    </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
      <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
      <a href="#">
        <img src="#">
      </a>
    </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
      <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
      <a href="#">
        <img src="#">
      </a>
    </div>
    </div> 

  </div>
</div>

【讨论】：

【解决方案2】：

将您的选择器从 .card:nth-child(even):hover 更正为 .col-s6:nth-child(even) .card:hover

.card:nth-child(even):hover 将选择其父级中的每张偶数卡。

.col-s6:nth-child(even) .card:hover 将选择每个偶数 col-s6 然后它会影响它的孩子 .card

.card {
  margin: 30px auto;
  padding: 20px 40px 40px;
  width: 450px;
  height: 450px;
  text-align: center;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}

.card:hover {
  border-color: #75dcff;
}

.col-s6:nth-child(even) .card:hover {
  border-color: #ff7c5e;
}

<div class="container">
  <div class="row">

    <div class="col-s6 col-sm">
      <div class="card projects">
        <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
        <a href="#">
          <img src="#">
        </a>
      </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
        <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
        <a href="#">
          <img src="#">
        </a>
      </div>
    </div>
    <div class="col-s6 col-sm">
      <div class="card projects">
        <h2 class="card-title">Lorem ipsum dolor sit amet.</h2>
        <a href="#">
          <img src="#">
        </a>
      </div>
    </div>

  </div>
</div>

【讨论】：