1. 標簽選擇器

• 影響範圍大
• 建議盡量應用在層級選擇器中
• 舉例

<!-- body 體中的 div -->
<div>box...</div> 

/* style 中的設置 */
*{
    margin: 0;  /* 邊距屬性 */
    padding: 0; /* 內邊距 */
}
div{
    color: red; /* 設置文本顏色 */
}

• 補充：
  • 上方的語句，如 padding:0; color: red; 末尾可以不加分號
  • 因為它們在各自的最後一行
  • 推薦都加上分號

2. id 選擇器

• 通過 id 名來選擇元素
• 元素的 id 名不能重復
• 一般不推薦使用 id 作為選擇器
• 舉例

<!-- body 體中的 div -->
<div id="box">box...</div>

/* style 中的設置 */
#box{
    color: red;
} 

3. 類選擇器

• 影響範圍相對較小
• 通過類名來選擇元素
• 一個類可應用於多個元素
• 一個元素上也可以使用多個類
• 是 css 中應用最多的一種選擇器
• 舉例

<!-- body 體中的 div 等 -->
<div class="div_box">div_box...</div>
<h1 class="h1_box">h1_box...</h1>
<p class="p_box">p_box...</p>
 

/* style 中的設置 */
.div_box{
    color: red;
}
.h1_box{
    font-size: 20px;    /* 字體大小 */
}
.p_box{
    margin-top: 10px;   /* 設置元素的上外邊距 */
}

4. 層級選擇器

• 主要應用在
  • 選擇父元素下的子元素
  • 子元素下面的子元素
• 可與標簽元素結合使用，減少命名
• 可以通過層級，防止命名沖突
• 可以和多種選擇器混合使用
• 舉例

<!-- body 體中的 div 等 -->
<div class="div_box">
    <span>span...</span>
    <a href="#" class="a_h_box">a...</a>
</div>

<h3 class="a_h_box">h3...</h3>
 

/* style 中的設置 */
.div_box span{
    color: red;
}
.div_box .a_h_box{
    color: blue;
}
.a_h_box{
    color: green;
}

5. 組織選擇器

• 多個選擇器，如果有同樣的樣式設置，可以使用組選擇器
• 也稱為並列選擇器
• 舉例

<!-- body 體中的 div -->
<div class="box1">box1...</div>
<div class="box2">box2...</div>
<div class="box3">box3...</div>

/* style 中的設置 */
.box1, .box2, .box3{
    width: 100px;
    height: 100px;
}
.box1{
    background: blue;
}
.box2{
    background: green;
}
.box2{
    background: yellow;
}

6. 偽類選擇器

• hover 是常用的偽類選擇器，表示鼠標懸浮在元素上時的狀態
• 舉例

<!-- body 體中的 div -->
<div class="box">box...</div>

/* style 中的設置 */
.box:hover{     /* 此處的冒號前後不要加空格 */
    color: red;
}

7. 偽元素選擇器

• before 和 after 是偽元素選擇器，它們可以通過樣式在元素中插入內容
• 舉例

<!-- body 體中的 div -->
<div class="box">
    <a>123</a>
</div>

/* style 中的設置 */
a:hover{
    color: red;
    text-decoration: underline;     /* 加下劃線 */
}   /* 鼠標在該元素上時 */
a:before{
    content:"Hello";
}   /* 在每個 <a> 元素之前插入 Hello */
a:after{
    content:"World";
}   /* 在每個 <a> 元素之後插入 World */

8. 關於選擇器的優先級

• 影響範圍越大的選擇器優先級最低
• 個人覺得，有種“強龍不壓地頭蛇”的感覺
• 打個不太恰當的比喻
  • 左冷禪（如標簽選擇器）是五嶽盟主，執五嶽令旗，霸權五嶽劍派
  • 嶽不群（如類選擇器）是華山派掌門，雖說要聽那個左盟主的號令，但華山派的事還是自己說了算
  • 令狐沖（如 id 選擇器）是華山派首徒，平時是可以“為所欲為”的

[Web 前端] 007 css 常見的七種選擇器