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

Question

当我不使用 bootstrap 时，此设置工作正常。但是当我把它全部包裹在 Bootstrap 中时，它就停止工作了。我该如何解决？

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

工作得很好，但是当我使用 bootstrap 时。它停止工作。我试过选择 .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 ，我不是在选择一个类吗？

Answer 1

将您的选择器从 .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 然后它会影响它的 child .卡片

.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>