HTML&CSS基础-否定伪类

　　　　　　　　　　　　　HTML&CSS基础-否定伪类

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

 

一.html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>否定伪类</title>
        <style>
            /**
             * 否定伪类选择器
             *     作用:
             *         可以从已选中的元素中剔除某些元素
             *     语法:
             *         :not(选择器)
             * 
             */
            
            /**
             *     案例一：
             *         为所有的p元素设置一个背景颜色为黄色,除了class值为"hello"的
             */
            p:not(.hello){
                background-color: yellow;
            }
            
            /**
             *     案例二:
             *         为所有的span元素设置一个背景颜色为红色，除了id为"def"的
             */
            span:not(#def){
                background-color: red;
            }
        </style>        
        
    </head>
    <body>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <span>我是一个span标签</span>
        <span>我是一个span标签</span>
        <p>我是一个p标签</p>
        <p class="hello">我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <div>
            <span>我是div中一个span标签</span>
            <span>我是div中一个span标签</span>
        </div>
        <p class="world">我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <span id="def">我是一个span标签</span>
        <span>我是一个span标签</span>
        <span id="func">我是一个span标签</span>
        <span>我是一个span标签</span>
        <span>我是一个span标签</span><br /><br />
        
    </body>
</html>

 

二.浏览器打开以上代码渲染结果

 

posted @ 2017-01-10 16:19  尹正杰  阅读(684)  评论(0)  编辑  收藏  举报