1.實驗：CCS選擇器
2.IDE：VSCODE?
3.記錄：?
子代選擇器、后代選擇器、相鄰兄弟選擇器、類選擇器、偽元素選擇器（鼠標懸停）、ID選擇器、調用選擇器（全選）
4.代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 元素選擇器 -->
<style>h1{color: darkgreen;}
</style>
<!-- 類選擇器 -->
<style>.father{color: blue;}
</style>
<!-- 通用選擇器 -->
<style>*{color: blueviolet;font-family: 'KaiTi';}
</style>
<!-- 子代選擇器 -->
<style>.father_one > .son_one{color: aquamarine;}
</style>
<!-- 后代選擇器 -->
<style>.father_one p{font-size: 40px;}
</style>
<!-- ID選擇器 -->
<style>#header{color: chartreuse;}
</style>
<!-- 相鄰元素選擇器 -->
<style>h3 + p{background-color: chartreuse;}
</style>
<!-- 偽類選擇器 -->
<style>#element:hover{background-color: coral;}
</style>
<body><h1>這是元素選擇器</h1><p class="father">這是類選擇器</p><p>這是第二段文字</p><p class="father">這是第一段文字的同輩</p><p>這是第三段文字</p><div class="father_one">這是父親<p class="son_one">這是兒子<div><p>這是孫子</p></div></p></div><div id="header">這是一個ID選擇器</div><p>這是一個普通的P標簽</p><h3>這是一個相鄰兄弟選擇器示例</h3><p>這是另一個p標簽</p><div id="element">這是一個偽類選擇器示例</div>
</body>
</html>
)
