使用伪元素定位特定div

时间：2017-09-22 12:19:53

标签： html css css3 css-selectors flexbox

我试图简单地使用.counter-wrap类来定位我的html中的第三个div。在移动设备上，此div的margin-bottom为40px。我想删除名为.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>

3 个答案:

答案 0 :(得分：2)

请检查更新的代码。您只需要更新此css，您将获得所需的结果。

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

答案 1 :(得分：2)

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

.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 :(得分：2)

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

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

＆＃13;
＆＃13; 
    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;
    }
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题