创建伪元素，但排除特定元素（不包含：nth-​​child）

Question

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

:not选择器与伪选择器不兼容吗？在这种情况下，我如何才能使伪元素工作并排除某些特定元素？

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

这是一个小提琴:(由于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

您是否尝试为除第三个孩子以外的所有人创建::before伪元素？

如果是这样，:not()伪类需要先到，因为伪元素只能出现在选择器的最末端（这就是为什么构成术语“伪选择器”是使用起来很危险，因为鉴于它们的语法差异，你不能将伪类和伪元素分组到一个总括词中）：

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

因为你无论如何都在使用CSS3伪类，所以伪元素应该用双冒号来表示，以进一步巩固两者之间的区别。

另请参阅：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;
}