技术小黑屋

也说CSS之not:为样式加入例外处理

使用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>

效果就是如下这样

  • Android
  • Chrome
  • Google Glass

其他


我的知乎 Live 推荐