Question

我试图定位一个我要用来更改边框宽度的伪元素。

我正试图摆脱顶部边界（第一个孩子）

但是它不起作用。这是您瞄准伪元素的方式吗？

<div class="landingHeaderNav">
  <a href="#">Click here</a>
  <a href="#">Click here</a>
  <a href="#">Click here</a>
</div>

.landingHeaderNav a {
  color: #000;
  display: block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 5%;
  border-top: 1px solid #000;
 }
:first-child {
  ::before {
    border-top:none;
  }

这是笔：https://codepen.io/tysonmaynes/pen/JeVrLr

Answer 1

在 css 中，您必须使用以下方法将伪元素之前的元素设置为.landingHeaderNav a:before：

.landingHeaderNav a {
  color: #000;
  display: block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
.landingHeaderNav a:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 5%;
  border-top: 1px solid #000;
 }
.landingHeaderNav a:first-child::before {
    border-top:none;
  }

<div class="landingHeaderNav">
  <a href="#">Click here</a>
  <a href="#">Click here</a>
  <a href="#">Click here</a>
</div>

在sass或 s css中使用：

    .landingHeaderNav a {
      color: #000;
      display: block;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
   &:before {
      content: "";
      display: block;
      margin: 0 auto;
      width: 5%;
      border-top: 1px solid #000;
     }

    &:first-child::before {
        border-top:none;
      }
}

Answer 2

或者，您可以使用negation pseudo-class

.landingHeaderNav a {
  color: #000;
  display: block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

.landingHeaderNav a:not(:first-child)::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 5%;
  border-top: 1px solid #000;
}

<div class="landingHeaderNav">
  <a href="#">Click here</a>
  <a href="#">Click here</a>
  <a href="#">Click here</a>
</div>

第一个孩子的目标伪元素

2 个答案: