创建伪元素，但排除特定元素（使用 not:nth-child）

Question

我想在某些容器上设置伪元素边框，但不包括第三个。我以为我可以将伪选择器与 :not 结合使用，例如：div:before:not(nth-child(3))，但它似乎不起作用。

那么 :not 选择器是否与伪选择器不兼容？在那种情况下，我怎样才能让它工作放置伪元素并排除一些特定元素？

（顺便说一句，伪元素边框的想法是控制边框，使它们保持在顶部，无论顶部是否有任何覆盖（虽然还没有看到它是否有效）

这是一个fiddle：（没有可见的边框，因为 not:(nth-child(3)) 选择器）

这是来自 fiddle 的代码：

HTML:

<div class="ctr">
  <div>
      <div></div>
    <div></div>
    <div></div>
    </div>
  <div>
     <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS:

.ctr > div div{
  float:left;
  width:100px;
  height:100px;
  background:black;
  /*border:green 3px solid; */
}
.ctr > div:after{
  content:"";
  display:block;
  clear:both;
}
.ctr > div div{
  position:relative;
}

/* only if I remove ":not(:nth-child(3))" , the pseudo selector will appear: */

.ctr > div div:before:not(:nth-child(3)){   
       content: "";
      display: block;
      z-index: 2;  
      position: absolute;
      left:0;
      right:0;
      bottom:0;
       top:0;
       height: 100%;
       width: 100%;
      border-right: 0.35em red solid;
      border-bottom: 0.35em red solid;
    }

Answer 1

您是否正在尝试为除第三个 child 之外的所有人创建一个 ::before pseudo-element？

如果是这样，:not() pseudo-class 需要排在第一位，因为 pseudo-element 只能出现在选择器的最后（这就是为什么 made-up 术语 "pseudo-selector" 使用起来很危险，因为鉴于语法差异，您不能将 pseudo-classes 和 pseudo-elements 组合成一个总称）：

.ctr > div div:not(:nth-child(3))::before

既然您使用的是 CSS3 pseudo-classes，那么 pseudo-elements 应该用双冒号表示以进一步巩固两者之间的区别。

另请参阅：How to write :hover condition for a:before and a:after?

Answer 2

我希望这对你有用

.ctr > div div:nth-child(3).before{
    /*remove properties you don't need on third element*/
}

或者你甚至可以像下面这样隐藏伪元素

.ctr > div div:nth-child(3).before{
    display: none;
}

创建伪元素，但排除特定元素（使用 not:nth-child）

Create pseudo elements, but exclude specific elements (with not:nth-child)

css

css-selectors

pseudo-class

pseudo-element