3.5 :not()选择器

一、:not()选择器

在CSS3中,:not()选择器中主要用于选取某个元素之外的所有元素。这是very very实用的一个选择器,大家要重点记忆一下。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>CSS3 :not()选择器</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul{list-style-type:none;}
        ul li:not(.first)
        {
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first">绿叶学习网</li>
        <li>绿叶学习网</li>
        <li>绿叶学习网</li>
        <li>绿叶学习网</li>
    </ul>
</body>
</html>

在浏览器预览效果如下:

分析:

对于 “ul li:not(.first)”这个选择器,我们分2步来看,其中括号内的“.first”表示选择class值为first的元素(即第1个li元素),因此“ul li:not(.first)”表示选择ul元素下除了第1个li元素的其他所有li元素。

假如没有:not()选择器,我们要实现如上效果也是非常费事的一件事情,冗余代码多。其实:not()选择器的使用思想跟数学上补集的思想类似。:not()选择器在实际开发中非常实用,也比较灵活。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部