Question

当我不使用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）偶数）：悬停工作以使其将所有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上的类是卡片而且我在我的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然后它会影响它的孩子.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>

Answer 2

您的问题是每个.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>

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

2 个答案: