css - :not pseudo class doesn't work

Question

我有一个样式规则:

.tabs li {
    border: 1px solid transparent;
}

.tabs li:not(:last-child):not(:nth-child(2)):hover {
    background-color: rgba(132,141,149,0.05);
    border-color: rgba(228,230,232,0.25);
}

当您将鼠标悬停在第二个和最后一个元素上时，它应该会更改所有元素的 li 背景和边框的颜色。但不知何故它适用于所有 li 元素。我应该使用什么 CSS 规则？

更新

saNiks 的回答帮助我找到了解决方案。这是 css 代码的样子:

.tabs li {
    border: 1px solid transparent;
}

.tabs li:hover {
    background-color: rgba(132,141,149,0.05);
    border-color: rgba(228,230,232,0.25);
}

.tabs li:last-child:hover, .tabs li:nth-child(2):hover {
    background-color: transparent;
    border-color: transparent;
}

Answer 1

您需要重写您的样式以使用 :not 选择器来应用您想要的默认样式，如下所示

.tabs li {
   border: 1px solid transparent;
}

.tabs li:hover {
    background-color: rgba(132,141,149,0.05);
    border-color: rgba(228,230,232,0.25);
}

.tabs li:not(:last-child):not(:nth-child(2)):hover {
    background-color: transparent;
    border-color: transparent;
}

工作 JSFiddle代码在这里