：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; 
   }