css3 新加選擇器 排除選擇器 :not()

 

css :not()排除函數

css:not()函數用來排除選擇，not(x),其中的x爲css選擇器，但是x不能是not選擇器，也就是說:not()排除選擇器不能嵌套使用。

css:not()排除選擇器使用

.sibcont{

    background:#f1f1f1;

    border:1px solid #bababa;

    margin:20px;

    padding:20px;

}

.sibcont ul{

    margin:0;

    padding:0;

    list-style:none;

}

.sibcont ul li{

    color:#C91010;

    font-size:13px;

    line-height:26px;

}

//not選擇器

.sibcont ul li:not(:first-child){

    color:#0C58A7;

}

 

<div class="sibcont">

    <ul>

        <li>妹子前端</li>

        <li>妹紙前端</li>

        <li>mooshine前端</li>

        <li>not()選擇器</li>

    </ul>

</div>

效果如下：

我們使用css :not()排除選擇器，排除了第一個子元素li，把剩下的li的顏色設置爲藍色。你可以要說我們可以直接使用：first-child來設置第一個li不就能實現了嗎，這話不假，這個demo只是介紹:not()函數語法而已。

css:not()函數用在自定義按鈕上

.mmbtn{

    display:inline-block;

    font-size: 13px;

    line-height:28px;

    padding:0 1.2em;

    color:#fff;

    text-decoration: none;

    border:none;

}

.mmbtn:not(.disabled){

    background:#07A725;

}

.mmbtn:not(.disabled):active{

    background:#06801C;

}

.mmbtn + .mmbtn{margin-left:12px;}

.disabled{

    background:#353535;

    cursor:default;

}

 

<div class="sibcont">

    <a href="javascript:;" class="mmbtn">按鈕</a>

    <a href="javascript:;" class="mmbtn">取消</a>

    <a href="javascript:;" class="disabled mmbtn">確定</a>

</div>

效果如下：

這纔是:not()函數的用途，這裏disabled樣式的按鈕定義爲置灰不可用的，使用not定義可用按鈕的顏色，使用diabled定義不可用按鈕的顏色，這樣diabled樣式可以寫在mmbtn樣式後面，也可寫在前面，active僞類也使用not()函數去除disabled樣式的active狀態。這裏用了相鄰元素的選擇器，如果你不明白，可以點擊這裏查看css +相鄰元素選擇器。

上面的代碼使用了active的僞類，截圖看不真着，你可以點擊這裏查看css :not()按鈕。

css:not()多個否定條件的使用

:not()函數不能嵌套，但是可以並列使用

.sibcont ul li{

    color:#C91010;

    font-size:13px;

    line-height:26px;

}

.sibcont ul li:not(:first-child):not(:last-child){

    color:#0C58A7;

}

not級聯使用的效果如下：

通過css :not()級聯，排除了第一個li，最後一個li，只有中間兩個li的內容是藍色的。

css:not()兼容性

css:not()函數屬於css3新定義的函數，所以要到IE9才能支持，兼容性也是十分良好的。