二十二、複合選擇器
代碼
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>複合選擇器</title>
<style>
h3.spe{color:red;}
h3,spe{color:green;}
h3 b{font-size:40px;}
</style>
</head>
<body>
<h3>標題一</h3>
<h3 class="spe">標題二</h3>
<h3>標題三<b class="spe">加粗了<span>哈哈</span></b></h3>
</body>
<html>
知識點
- “選擇器選擇器”爲交集形式，同時滿足纔可觸發
- “選擇器,選擇器”爲並集形式（中間用逗號隔開），滿足其中一個纔可觸發
- “選擇器 選擇器”爲後代形式（中間用空格隔開），滿足嵌套關係纔可觸發
二十三、後代與子代
代碼
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>後代與子代</title>
<style>
p span{color:blue;}
</style>
</head>
<body>
<p>這是最外層的文字<span>這是中間層的文字<b>這是最內層的文字</b></span></p>
</body>
<html>
知識點
- 後代選擇器影響各級後代的樣式
擴展
- 將<style></style>中的“p span”改爲“p>span”
答案：(1)“選擇器>選擇器”爲子代形式，僅影響其直接下一級後代（子代）
(2)老式瀏覽器不支持這種用法
二十四、繼承與層疊
- 繼承：子標籤繼承父標籤的樣式
- 層疊：樣式衝突的解決方案
二十五、雜項
- 長度：(1)px像素；(2)em字符（以font-size作參考）；(3)rem
- 在CSS顏色中，“#XXYYZZ”可簡寫爲“#XYZ”
