zoukankan      html  css  js  c++  java
  • (十三)学习CSS之两个class连一起隔空格和逗号

    1.时常见到css的这两种种写法:

    a.两个class隔空格连一起:

    .class1 .class2{......}

    b.两个class隔逗号连一起:

    .class1,.class2{......}

    2.举两个例子说明:

    两个class隔空格连一起,例A:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>两个class隔空格连一起</title>
        <style type="text/css">
            .classDiv {
                height: 200px;
                 200px;
                background-color: aqua;
            }
             .classDiv .classP {
                 color: hotpink;
                 background-color: #e7e7e7;
             }
        </style>
    </head>
    <body>
        <div class="classDiv">
            <p class="classP">
                .classDiv .classP对我生效
            </p>
            .classDiv .classP对我无效
        </div>
        <p class="classP">
            .classDiv .classP对我生效
        </p>
    </body>
    </html>

    例A结果:

    两个class隔逗号连一起,例B:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>两个class隔逗号连一起</title>
        <style type="text/css">
            .classDiv {
                height: 200px;
                 200px;
                background-color: aqua;
            }
             .classDiv .classP {
                 color: hotpink;
                 background-color: #e7e7e7;
             }
        </style>
    </head>
    <body>
        <div class="classDiv">
            <p class="classP">
                .classDiv .classP对我生效
            </p>
            .classDiv .classP对我无效
        </div>
        <p class="classP">
            .classDiv .classP对我生效
        </p>
    </body>
    </html>

    例B结果:

    3.结果说明:

    a写法只对两个class中的后者有效,前者起到过滤的作用;b写法对所有class都有效。

    .class1 .class2{......}
  • 相关阅读:
    别的程序员是怎么读你的简历的
    .NET平台的ORM分析工具
    有关各个版本的Visual Studio(VS)和SQL Server安装的顺序总结
    QQ空间魔力日志大全SduSRZ
    【Python】哈姆雷特字数统计
    【Python】统计
    【Python】koch雪花
    【Python】汉诺塔问题
    【Python】七个数码管年月日
    【Python】圆周率计算
  • 原文地址:https://www.cnblogs.com/wiming/p/3956055.html
Copyright © 2011-2022 走看看