css - 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 示例

我想要做的是使第一层和最后一层具有圆角，而不是另一层。如您所见，我可以使第一层没有边框半径，但是当应用 :not(:first-child) 选择器时，它会使最后一层发生变化。

如果有人能理解我的观点，我将非常感谢您的帮助。

Answer 1

你想要做的是说“既不是第一个孩子也不是最后一个孩子的图层应该有border-radius: 0”。您可以通过拥有多个:not()选择器来实现这一点：

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

更新了 jsFiddle

Answer 2

我认为您需要在这里进行 2 处更改：

1. 将最后一个 CSS 声明（带有 :not 的那个）移到 :last-child 声明上方（在 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;
   }