时间戳

首页 > 解决方案 > 是否可以在 :not 选择器中链接伪类？

css - 是否可以在 :not 选择器中链接伪类？

问题描述

我已经得到了我正在寻找的结果，但只是想知道是否有更好的方法可以到达那里。我在 2 列网格容器中有未知数量的元素grid-template-columns: repeat(2, 1fr);。所有元素之间都有网格线，但不在它们之外。我已通过以下方式完成此操作：

.parent > * {
    padding: 1.2rem 0;

    &:not(:last-child) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    &:nth-last-child(2):nth-child(odd) {
      border-bottom: none;
    }

    &:nth-child(odd) {
      border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
  }

我想知道如果奇怪的话，是否有比重置倒数第二个元素的边框样式更好的方法。我不明白为什么这样的事情不这样做。

&:not(:last-child):not(:nth-last-child(2):nth-child(odd)){
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

万分感谢。亲切的问候，杰罗姆

标签： csssasspseudo-class

解决方案

这是在一行中执行此操作的一种方法。

定位每个偶数孩子加上每个不是倒数第二个的奇数孩子：

.parent {
  margin-bottom: 1rem;
}
.parent > :nth-child(even), .parent > :nth-child(odd):not(:nth-last-child(2)){
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   padding-left: 1rem;
}
<div class="parent">
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
</div>

<div class="parent">
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum</div>
</div>

推荐阅读