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

Question

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

那么:not选择器是否与伪选择器不兼容？在那种情况下，我如何才能使它具有伪元素并排除某些特定元素？

（顺便说一句，与伪元素边框的想法是控制边界，让他们留在上面，无论是否有顶部（还没有看到任何重叠，如果它工作虽然）

这里小提琴：（有因为没有没有明显的边界：（第n个孩子（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; 
}