也说CSS之not：为样式加入例外处理-CFANZ编程社区

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

使用Octopress作为日常的博客发布工具，在加入多说评论的时候遇到了一个问题，顺带接触了css中的not选择，用来将某些Css选择器加入例外，不应用指定的css样式。

用法

:not(selector),参数selector为css中的选择器，可以是元素，类，id等。如不清楚，可以查阅CSS3 选择器了解详细。

语法

lineos:false

/单个使用/ :not(selector) { property: value; } /多个使用/ :not(selector1):not(selector2) { property: value; }

例子

下面代码，所有的li元素都有一个样式，就是背景色设置为红色，这里我们把class为special和id为specialLi的li元素加入例外，不应用这个样式，我们就可以这样做。

lineos:false

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

<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

其他

CSS禅意花园
典藏经典：CSS权威指南
HTML5与CSS3设计模式

0 条评论