使用伪元素定位特定 div答案

【问题标题】：Target specific div with pseudo element使用伪元素定位特定 div
【发布时间】：2018-03-04 00:44:21
【问题描述】：

我正在尝试使用 .counter-wrap 类简单地定位我的 html 中的第三个 div。在移动设备上，此 div 的 margin-bottom 为 40 像素。我想删除名为.counter-wrap 的第三个堆叠div 上的margin-bottom。

我以为我可以简单地做.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>

【问题讨论】：

如果对您有用，请您标记并投票吗？
给定的答案有一个很大的缺陷，第二个你即添加第四个col 以获得一些额外的信息，它们都会中断。为您要定位的课程设置课程将始终有效。
是的，我完全知道感谢您指出这一点。我不会再添加“cols”所以应该没问题

标签： html css css-selectors flexbox

【解决方案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>

【讨论】：

谢谢！我知道这很简单。工作一种享受

【解决方案2】：

请检查更新的代码。你只需要更新这个 css rest 你就会得到想要的结果。

.wrap .col:last-child .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;
}

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

}

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

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

【讨论】：

【解决方案3】：

您可以使用nth-child() 规则。将其应用于父元素，然后输入您希望定位的子类的数量。在这种情况下，它会是

.col:nth-child(3) .counter-wrap {
background:red;
}

    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;

    }


    .col:nth-child(3) .counter-wrap {
      background:red;
    }

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

【讨论】：