CSS組合選擇符

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>

效果如下所示:



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章