(十三)学习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;
            width: 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;
            width: 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{......}
posted @ 2014-09-04 14:41  wiming  阅读(2318)  评论(1)    收藏  举报