无法将多个伪classes 添加到 :not() 伪class

Question

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

例如，如果我使用 :not() 伪 class 与 :last-child 关联，它会正常工作。但是一旦我添加第二个伪class（比如: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 并且显然我的语法 "theoricaly" 是正确的。我错了吗？

Answer 1

而是使用这个使用 2 个非选择器的选择器，这就像说不是最后一个 child 而不是第一个 child :

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

Answer 2

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

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

勾选browser support doc

无法将多个伪classes 添加到 :not() 伪class

Can't add multiple pseudo-classes to a :not() pseudo-class

html

css

css-selectors

pseudo-class