---
# System prepended metadata

title: 20230325 CSS複合選擇器
tags: [前端課程筆記]

---

# 20230325 CSS複合選擇器

#### 1. Grouping Selectors 群組選擇器
E1, E2 (中間以逗號區隔)
符合對象: E1元素與E2元素

![](https://i.imgur.com/E21DqK7.png)

#### 2. Descendant Selectors 後代選擇器
E1 E2 (中間以空格區隔)
符合對象: E1元素底下的所有E2元素 (E1的所有後代子孫)

![](https://i.imgur.com/XHR99Tx.png)

E1 E2 E3
符合對象: E1元素底下的E2元素底下的所有E3元素 (先後順序符合即可)

⭕️
![](https://i.imgur.com/828QfRM.png)
⭕️
![](https://i.imgur.com/Jdoa3xC.png)


小練習：
1.button-box class的元素底下
2.button元素且是submit類型，被disable的元素底下
3.文字要變為紅色
![](https://i.imgur.com/Lz0WNrm.png)

#### 3. Child Selectors 子選擇器

E1 > E2 (中間以大於符號區隔)
符合對象: E1元素底下第一層的所有E2元素 (E1的小孩，再下一代就不算)

![](https://i.imgur.com/3HfMifE.png)

E1 + E2 (兩個元素間使用加號區隔)
符合對象: E1元素之後緊鄰的E2元素 (跟E1要是手足且在他之後第一個出生的)
![](https://i.imgur.com/UOvd0Un.png)

進階版同層相鄰選擇器範例: 幫醜醜的radio button改變樣式
<div>
  <input type="radio" id="one" name="test">
  <label for="one"><span></span>One</label>
  <input type="radio" id="two" name="test" checked>
  <label for="two"><span></span>Two</label>
  <input type="radio" id="three" name="test">
  <label for="three"><span></span>Three</label>
</div>

input[type="radio"]{
  display:none;
}
input[type="radio"] + label span{
  display:inline-block;
  height:20px;
  width:20px;
  background-color:black;
  border-radius:30%;
  cursor:pointer;
  margin:5px;
}
input[type="radio"]:checked +label span{
  background-color:pink;
}
![](https://i.imgur.com/SxWbRSg.png)

#### 4. General Sibling Selectors 同層全體選擇器
E1 ~ E2 (兩個元素間使用波浪符號區隔)
符合對象: 與E1元素同一層的所有E2元素 (只要跟E1是手足)

![](https://i.imgur.com/6KbNyLv.png)

#### 5. Multiple Selectors 多重選擇器
E1E2 (兩個元素間無區隔)
符合對象: 同時具備E1與E2的元素

![](https://i.imgur.com/vIxTu5Z.png)

#### 6. Pseudo-element Selectors 偽元素選擇器
可選擇到Document Tree(HTML) 中不存在的元素
格式: 
E::pseudo-element {
  attribute: value;
}

與pseudo-class-selectors不同，需要使用兩個冒號
E::first-line
符合對象: 第一行文字(只作用在Block-level元素上)

![](https://i.imgur.com/bRlNjCY.png)

![](https://i.imgur.com/VKvLWtH.png)

E::first-letter
符合對象: 第一個字

![](https://i.imgur.com/6Dsh7zQ.png)

![](https://i.imgur.com/UlTixlO.png)

E::before
符合對象: 在該元素前憑空創造一個新的偽元素
CSS一定要搭配Content屬性才會有作用!!

![](https://i.imgur.com/q6ZxFVC.png)

E::after
符合對象: 在該元素後憑空創造一個新的偽元素
CSS一定要搭配Content屬性才會有作用!!

![](https://i.imgur.com/c9dJmjk.png)

<小補充>content 屬性可放置的內容
(1) 文字
![](https://i.imgur.com/iZtOiuT.png)


(2) unicode
![](https://i.imgur.com/DU1WkWS.png)

(3) attr(data-*)
![](https://i.imgur.com/m790xya.png)

(4) url(“圖片連結”)
![](https://i.imgur.com/uedrZaq.png)

#### 流水號補充
counter() 是 CSS 的一種計數器，可以用來產生流水號或計數器。在使用 counter() 時需要先定義一個計數器，可以使用 counter-reset 定義計數器的起始值，再使用 counter-increment 對計數器進行遞增，最後使用 content 屬性將計數器插入到 HTML 元素中。

以下是一個例子：
![](https://i.imgur.com/JBHsdzU.png)

![](https://i.imgur.com/DondLI1.png)

上述 CSS 會對 <ol> 元素定義一個計數器 item，起始值為 0。對 <li> 元素套用 counter-increment: item，表示每次出現 <li> 時計數器 item 的值都會加 1，並且使用 content 屬性在 <li> 前插入計數器的值和一個點號，最終顯示效果如下：

Item 1
Item 2
Item 3
    
以上示例是利用 counter() 產生一個項目的流水號，不同的選擇器結合 counter() 可以產生更多的效果，例如利用 counter() 產生分頁號碼、章節編號等。
    
反白
::selection