Question

我尝试将样式应用于除第一个和最后一个元素之外的所有元素。我知道有很多方法可以做到。但是我正面临一种奇怪的行为（我相信吗？）。

例如，如果我将:not()伪类与:last-child结合使用，它将很好地工作。但是，一旦我添加了第二个伪类（比如说:first-child），它将无法正常工作。

我们在这里

.div-list {
  width:100px;
  height:400px;
}

.div-list div {
  width:25%;
  height:25%;
  background-color:green;
}
.div-list div:not(:last-child) {
  background-color:red;
}

.div-list div:not(:last-child,:first-child) {
  border:1px solid blue;
}

<div class='div-list'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

请注意，我知道standard，并且显然我的语法是“理论上”正确的。我错了吗？

Answer 1

：not的多个类选择器仅在4级CSS选择器中受支持，并且并非在所有浏览器中都适用。它目前仅在Safari中有效，相反，您可以使用多个:not

.div-list div:not(:last-child):not(:first-child) {
  border:1px solid blue;
}

检查browser support doc

Answer 2

使用此选择器而不使用2个选择器，就像说不是最后一个孩子而不是第一个孩子：

.div-list div:not(:last-child):not(:first-child)

.div-list {
  width: 100px;
  height: 400px;
}

.div-list div {
  width: 25%;
  height: 25%;
  background-color: green;
}

.div-list div:not(:last-child) {
  background-color: red;
}

.div-list div:not(:last-child):not(:first-child) {
  border: 1px solid blue;
}

<div class='div-list'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

无法将多个伪类添加到：not（）伪类中

2 个答案: