代碼部分：
part1：
div p ：將所有<div>標籤裏面的<p>標籤選中（子標籤和孫子輩標籤）
<html>
<head>
<style>
div span{color:red;}
</style>
</head>
<body>
<div>
<p>
<span> Hello World! </span>
</p>
<span> Study Css </span>
</div>
</body>
</html>
上面的例子中所有的span都爲紅色
效果圖：
part2：
div>p ：將所有<div>標籤的子標籤<p>選中，不包括孫子輩標籤。
<html>
<head>
<style>
div>span{color:red;}
</style>
</head>
<body>
<div>
<p>
<span> Hello World! </span>
</p>
<span> Study Css </span>
</div>
</body>
</html>
這個例子中只有Study Css是紅色！
效果圖：
part3：
div+p ：將所有離<div>相鄰的<p>標籤選中
<html>
<head>
<style>
div+p{color:blue;} /*div後面緊跟着的第一個p標籤(必須是緊鄰的標籤)*/
</style>
</head>
<body>
<div>hello</div>
<p>world</p>
</body>
</html>
這個例子中world字體是藍色！
效果圖：
part4：
div~p ：將<div>後面所有的<p>標籤選中
<html>
<head>
<style>
div~p{color:orange;}
</style>
</head>
<body>
<div>第一段</div>
<p>p標籤</p>
<p>p標籤</p>
</body>
</html>
這個例子中所有p標籤字體都是橙色！
效果圖：
part5：
div.a ：將<div>下class="a"標籤選中
<html>
<head>
<style>
div.a{color:green;}
</style>
</head>
<body>
<div class="a">hello world</div>
</body>
</html>
這個例子中hello world字體是綠色！
效果圖：
part6：
p,span ：將p和span選中
<html>
<head>
<style>
p,span{color:green;}
</style>
</head>
<body>
<p>駕駛、行駛</p>
<span>記分查詢</span>
</body>
</html>
這個例子中p和span字體是綠色！
效果圖：
