zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    Ibatis入门基本语法(转) good
    zip文件压缩(转)
    联合创始人股权分配,五五分是最糟糕的做法(转)
    家长如何检查孩子的家庭作业
    oracle存储过程实例
    MachineKey
    写写我那天參加过的《文明之光》书友会
    各种加解密算法比較
    算法分析---查找最大回文子串
    随机数是骗人的,.Net、Java、C为我作证
  • 原文地址:https://www.cnblogs.com/yinzhengjie/p/6269791.html
Copyright © 2011-2022 走看看