<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.color1 {
color: #FF0000;
}
.border1 {
border: #ff8800 solid 3px;
margin: 20px;
padding: 20px;
}
.border1.color1 {
background-color: #00ff00;
}
.border1 .color1 {
background-color: #0000ff;
}
</style>
</head>
<body>
<div id='div1'>
<div id='div2' class='color1 border1'>
我是class='color1 border1'，我在這里?。?！
</div>
<div class="border1">
<div class="color1">
我是 < div class="border1"> < div class="color1">，我在這里?。?！
</div>
</div>
<div class="border1">
我是 < div class="border1"> ，我在這里?。。? </div>
<div class="color1">
我是 < div class="color1">，我在這里?。?！
</div>
</div>
</body>
</html>
運(yùn)行結(jié)果如下:
4D62FC03215F8CBF67928BD2C693FEC8.jpg
由上面可以看出：
在css中，類名+空格+類名，表示一種前后代關(guān)系。
在css中 ,類名+類名,表示一種多類選擇器，匹配同時(shí)具有這兩個(gè)類的元素。
在html中，class="類名+空格+類名",表示該元素同時(shí)擁有兩個(gè)類。
經(jīng)常容易搞混，特記在此處。
