1.class選擇器（當多個tag，需要賦予相同的屬性的時候，同時使用class選擇器控制）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="test/html;charset=utf-8">
<style type="text/css">
#box1{width:100px;height:100px;background:red;}
#box2{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="box1">塊兒</div>
<div id="box2">塊兒</div>
</body>
</html>——————-我是分割線（上下兩段代碼，顯示效果一致）———————
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.box{width: 100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="box">塊兒</div>
<div class="box">塊兒</div>
</body>
</html>2.同一個tag，可以使用多個class選擇器
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.box{width: 100px;height:100px;background:red;}
.blue{background: blue;}
</style>
</head>
<body>
<div class="box">.box控制我</div>
<div class="box blue">.box和.blue同時控制我</div>
</body>
</html>3.標籤選擇器（控制所有一種類型的tag，使其有相同的樣式）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
div{width:200px;height:200px;border:solid 2px black;}
p{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div>div控制我<p>p控制我</p></div>
<p>p控制我</p>
</body>
</html>4.子選擇器（只控制div 下的，“所有” p標籤）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
div p{width:200px;height:200px;background: red; border:solid 2px black;}
</style>
</head>
<body>
<div><p>div p控制我</p></div>
<div><h1><p>div p控制我</p></h1></div>
<p>div p不控制我</p>
</body>
</html>5.通用選擇器（控制所有tag）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
*{border:solid 2px black;}
</style>
</head>
<body>
<div>*控制我<p>*控制我</p></div>
<div>*控制我<h1>*控制我<p>*控制我</p></h1></div>
<p>*控制我</p>
</body>
</html>