Home / Blog / effect

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

Author: Vic.Wang 2016/02/25 Tags:cssnotselector选择器css选择器css技巧

分享几则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,你也可以配合其他选择器。