創建僞元素，但排除特定元素（不包含：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; 
}