Question

在倒置选择器逻辑上使用:not()是否有任何优点或缺点？可能是性能，安全性或浏览器支持，建议使用哪种方法？

或者：

.imageSlider img:not(:first-child) {
  display: none;
}

或者：

.imageSlider img {
  display: none;
}

.imageSlider img:first-child {
  display: block;
}

Answer 1

有时使用:not可能会更好。

<p class="my-paragraph">
    <div class="something"></div>
    <div class="something-else"></div>
    <div class="an-other-thing"></div>
    <div class="an-other-thing"></div>
    <div class="last-one"></div>
</p>

在这种情况下，如果你想要隐藏everything除了div .an-other-thing，它会更快写出来：

.my-paragraph div:not(.an-other-thing) {
    display: none;
}

而不是：

.my-paragraph div {
    display: none;
}

.my-paragraph div.an-other-thing {
    display: block;
}

在大多数情况下，较长的CSS意味着执行它的时间较长

Answer 2

截至2017年1月，目前只有Safari浏览器支持：not selector，全球浏览器支持率仅为11％。我不会在生产代码中使用它。

CSS选择器反转选择

2 个答案: