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{......}
  • 相关阅读:
    Nokia N8手机上开发Qt应用程序第一步:配置手机,使其支持Qt应用程序的运行
    Visual Studio 2010 "工具">"选项"中的VC++目录编辑功能已被否决
    删除用户 ORA04098
    把Excel转换成DataTable
    可编辑的DIV
    RDLC 错误号.
    leetcode| Add Digits
    leetcode| Integer to English Words
    leetcode|Counting Bits
    锁表了。。。
  • 原文地址:https://www.cnblogs.com/wiming/p/3956055.html
Copyright © 2011-2022 走看看