html 选择器使用技巧,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、逗号分割的列表

效果如下：

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

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

本文地址：http://blog.mingsixue.com/effect/CSS-not-use-skill.html

文章若需转载，请附上原文链接，谢谢配合。^_^