CSS3干货7：CSS中的not选择器

not 选择器用的少。

这天写资料的时候，看到别人写了一个例子有意思。

特此记录下，表示自己每天也算进步了一点。

not，就是“非，不是” 的意思。所以，not 选择器就是选择 “非xxx” 的标签。

一般格式如下：

.xxx:not( 非的条件 )

.xxx:not(:nth-child(3))    不是第三个子元素.xxx 。
.xxx:not(:first-child)   不是第一个子元素。

demo1： 

    
item 1
    
item 2
    
item 3
    
item 4
    
item 5
    
item 6
    
item 7
    
item 8
    
item 9
    
item 10

CSS代码：

.myul li:not(:nth-child(3)){
            color:#f00;
}

.myul 下，所有的 li ，除了第三个元素都会变红。（这其实就选中了 第3个元素的兄弟标签。）

demo2：

    
item1
    
item2
    
item3
    
item4
    
item5
    

        
item6-1
        
item6-2
    
    
item7

.mydiv :not( .x ){
            color:#f00;
}

.mydiv 下所有非 .x 的元素都会变红。

 .mydiv>:not(div):not(.y){
            background: #ff0;
 }

.mydiv 下子标签中，非div，且非类.y 的标签，背景色为黄色。

注意：  not 的括号里，不能写组合样式，比如 p.x  （类为x的p标签）。

 

结合其他选择器，相信 not 会带来更大的惊喜~！