使用伪元素定位特定 div

Posted 2023-03-06

【中文标题】使用伪元素定位特定 div

【英文标题】：Target specific div with pseudo element

【发布时间】：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”所以应该没问题

【参考方案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>