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

not 选择器用的少。

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

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

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

一般格式如下：

.xxx:not( 非的条件 )

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

demo1： 

<ul class="myul" id="myul">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
</ul>

CSS代码：

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

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

demo2：

<div class="mydiv">
    <p>item1</p>
    <p>item2</p>
    <div class="x">item3</div>
    <div class="x y">item4</div>
    <p class="x y">item5</p>
    <div class="z">
        <p>item6-1</p>
        <div class="y">item6-2</div>
    </div>
    <div class="x">item7</div>
</div>

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

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

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

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

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

 

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