CSS組合選擇符
1. 通配選擇符:*
- 適配文檔中所有html對象
- 用於定義html文檔中所有對象的基礎樣式(消除瀏覽器默認設置的基礎樣式)
- 根據就近原則,要放在css代碼的首行
- 最常用的用法:* {margin:0;padding:0;} /* 消除所有html標籤默認存在的內邊距 */
2.包含選擇符:父級對象a 子級對象b
- 根據html對象的嵌套關係,指定某個元素的子級元素樣式
- 選擇符對象可以是多重包含,即一層層包含下去,樣式僅僅作用於最後的內部對象。
- 元素對象之間用空格分隔
- 如:div p {color:red;} /* div對象中所有p對象被指定了紅色樣式 */
- 如:#box p a {color:blue;} /* id爲box的對象中p對象中的a對象被指定藍色樣式 */
3. 羣組選擇符:對象a,對象b,對象c……
- 將同樣的樣式用於多個選擇符對象,選擇符對象之間用逗號隔開。
/* no grouping 單個選擇符*/
h1`{color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping 羣組選擇符*/
h1, h2, h3, h4, h5, h6 {color:blue;}
4. 指定選擇符:標籤名.class類名
- 將class類選擇符和標籤選擇符結合在一起使用
- 主要適用於在使用了某個class類的所有html對象中特別指定某一類標籤。
- 如<h1>和某個<p>標籤調用了important這個類,只想給調用了important的p對象添加樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.important {font-weight:bold;}
p.important{color:blue;}
</style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
<p>This paragraph is normal.</p>
<p>This paragraph is normal.</p>
</body>
</html>
效果如下所示: