CSS :not()选择器使用技巧

分享几则 CSS 选择器 :not() 的使用技巧，你可以运用于实战，也可以用来装B提高逼格，让人发出「哇塞，这 css 好高大上…… css 还能这么写啊……这么好用的功能都不知道，拖后腿了」等等的感叹。

:not() 在 CSS 手册中的说明是：匹配不含有s选择符的元素E。

浏览器兼容性：IE9+

1、使用:not()去除列表最后一个元素的右边框

效果如下：

      Blog | 诗词 | 摄影 | 作品

CSS代码：

li:not(:last-child){
    border-right: 1px solid #333;
}

这种需求最常见的是在导航上，每个元素都需要加个右边框或者其他间隔符，我们最常用的办法是给所有的元素都加上右边框，然后给最后一个元素另外加一个 class 或者使用 last-child 之类的选择器去掉右边框，也有用 JS 去除的。无论那种方法，总要多写代码，尤其是 JS 的，很不值得用。

用上面那种 :not 选择器配合 :last-child 选择器，就棒棒哒^_^

你也可以举一反三，配合 :first-child 和 :nth-child 能弄出很多有意思的效果哦，都很不错哟。

2、逗号分割的列表

效果如下：

css, not, selector, 选择器, css选择器

比如这篇文章标题下面的 Tags 那部分，关键词标签有很多，每篇文章的个数都不一样，每次添加的时候很容易就忘记了加上分割的 , （逗号），通过CSS添加就不会忘记了。

这个和第一则的技巧是类似的，只不过这里运用了伪对象选择器 ::after，你也可以配合其他选择器。