• 技术文章 >web前端 >css教程

    cssnot选择器是什么?not()选择器详解

    云罗郡主云罗郡主2018-11-19 10:27:41原创3267
    本篇文章给大家带来的内容是关于cssnot选择器是什么?not()选择器详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    not()选择器

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

    举例:

    <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">php中文网</li>
            <li>php中文网</li>
            <li>php中文网</li>
            <li>php中文网</li>
        </ul>
    </body>
    </html>

    效果如下:

    微信截图_20181119102549.png

    分析:

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

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

    以上就是对cssnot选择器是什么?not()选择器详解的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。

    以上就是cssnot选择器是什么?not()选择器详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:cssnot选择器 cssnot
    上一篇:root选择器是什么?root选择器详解 下一篇:什么是empty选择器?empty选择器详解
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 使用HTML5的Notification API制作web通知的教程_html5教程技巧• HTML5 Notification(桌面提醒)功能使用实例_html5教程技巧• html5 桌面提醒:Notifycations应用介绍_html5教程技巧• jQuery中not()方法用法实例_jquery• jQuery过滤选择器:not()方法使用介绍_jquery
    1/1

    PHP中文网