html - 使用伪元素定位特定的 div

Question

我正在尝试使用 .counter-wrap 类简​​单地将我的 html 中的第三个 div 作为目标。在移动设备上，此 div 的 margin-bottom 为 40px。我想删除名为 .counter-wrap 的第三个堆叠 div 上的边距底部。

我以为我可以简单地做 .counter-wrap: last-of-type 但我认为这不起作用的原因是因为每个 .counter-wrap 都有自己的 .col 类。这可以用一个伪元素来完成，还是我最好只在最后一个 .counter-wrap div 上使用一个唯一的 id 并只应用 margin-bottom: 0？

body {
  color: black;
  font-size: 15px;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

.container,
.container-long {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.counter-wrap {
  margin-bottom: 40px;
}

.counter-text,
.counter-number {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: black;
}

.counter-text {
  letter-spacing: normal;
  font-weight: 400;
}

.counter-number {
  font-size: 60px;
  font-weight: 500;
}

<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在 col 类上使用 last-of-type 选择器，如下所示:

.col:last-of-type .counter-wrap {
  margin-bottom: 0;
}

请看下面的演示:

body {
  color: black;
  font-size: 15px;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

.container,
.container-long {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.counter-wrap {
  margin-bottom: 40px;
}

/*ADDED*/
.col:last-of-type .counter-wrap {
  margin-bottom: 0;
}

.counter-text,
.counter-number {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: black;
}

.counter-text {
  letter-spacing: normal;
  font-weight: 400;
}

.counter-number {
  font-size: 60px;
  font-weight: 500;
}

<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
    </div>
  </div>
</div>