：CSS上的not（）選擇器

Question

CSS上的not（）選擇器有問題。

我有這樣的代碼：

<div class="group"> 
    <div role="layer" class="one">Layer</div> 
    <div role="layer" class="two">Layer</div> 
    <div role="layer" class="three">Layer</div> 
    <div role="layer" class="four">Layer</div> 
</div> 

這個CSS：

div[role="layer"]{ 
    width: 100px; 
    height: 25px; 
    border: 1px solid red; 
    border-radius: 5px; 
    float: left; 
} 

.group > [role="layer"]:first-child{ 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
} 

.group > [role="layer"]:last-child{ 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
} 

.group [role="layer"]:not(:first-child){ 
    border-radius: 0; 
} 

JSFiddle Example

我想要做的是使第一和最後一層有圓角，但而不是其他層。正如你所看到的，我可以使第一層沒有邊界半徑，但是當應用：not（：first-child）選擇器時，它會使最後一層發生變化。

如果有人能理解我的觀點，我會非常感謝您的幫助。

Answer 1

你想要做的是說「既不是第一個孩子也不是最後一個孩子應該有border-radius: 0」。上述起來可以通過讓多個:not()選擇實現這一目標：

.group [role="layer"]:not(:first-child):not(:last-child){ 
    border-radius: 0; 
} 

Updated jsFiddle

Answer 2

我想你需要更換2次在這裏：

1. 移動最後的CSS聲明（不是一個有） ：最後孩子聲明（在CSS順序中很重要）

2. 替換

   .group > [role="layer"]:last-child { 
       border-top-left-radius: 0; 
       border-bottom-left-radius: 0; 
   } 
   

   與

   .group > [role="layer"]:last-child { 
       border-top-right-radius: 5px; 
       border-bottom-right-radius: 5px; 
   }