使用Octopress作为日常的博客发布工具,在加入多说评论的时候遇到了一个问题,顺带接触了css中的not选择,用来将某些Css选择器加入例外,不应用指定的css样式。
:not(selector),参数selector为css中的选择器,可以是元素,类,id等。如不清楚,可以查阅CSS3 选择器了解详细。
语法
lineos:false
1 2 3 4 5 6 7 8 | /*单个使用*/ :not(selector) { property: value; } /*多个使用*/ :not(selector1):not(selector2) { property: value; } |
---|
下面代码,所有的li元素都有一个样式,就是背景色设置为红色,这里我们把class为special和id为specialLi的li元素加入例外,不应用这个样式,我们就可以这样做。
lineos:false
1 2 3 4 5 6 7 8 9 10 11 12 | <head> <style type="text/css"> li:not(.special):not(#specialLi) { background-color: red } </style> </head> <ul> <li class="special">Android</li> <li>Chrome</li> <li id="specialLi">Google Glass</li> </ul> |
---|
效果就是如下这样