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次更改：

将最后一个CSS声明（带有：not的声明）移到：last-child声明上方（以CSS顺序为准）

替换

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

：CSS上的not（）选择器

2 个答案: