(十三)学习CSS之两个class连一起隔空格和逗号
浏览数：101 /
时间：2015年06月09日
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{......}郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
