CSS选择器反转选择

时间:2015-06-24 08:48:22

标签: css selector

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

或者:

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

或者:

.imageSlider img {
  display: none;
}

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

2 个答案:

答案 0 :(得分:2)

有时使用: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意味着执行它的时间较长

答案 1 :(得分:-2)

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