css多类选择器

时间:2023-03-08 22:53:43
css多类选择器
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<style type="text/css">
.a.b{ /*注意此处.a和.b之间没有空格*/
background-color:blue;
}
.a{
border:1px solid black;
}
.b{
color:red;
}
</style>
</head> </head>
<body>
<div style="width:100px;height:100px;"class="a b">
/*此div 显示 红字蓝背景黑框*/
123
</div>
<div style="width:200px;height:200px;" class="a">
/*此div仅显示黑框*/
123
<div style="width:100px;height:100px;" class="b">
/*此div仅显示红字*/
123
</div>
</div>
</body>
</html> 在css选择器中如果两个类之间没有空格,这表示这是个多类选择器;如果有空格就表示选择第一个类中的第二个类。