CSS 选择器反转选择

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>

在这种情况下，如果您想隐藏所有内容，除了 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 意味着更长的执行时间