# 20230325 CSS複合選擇器

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


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


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

⭕️
⭕️

小練習：
1.button-box class的元素底下
2.button元素且是submit類型，被disable的元素底下
3.文字要變為紅色

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

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


E1 + E2 (兩個元素間使用加號區隔)
符合對象: E1元素之後緊鄰的E2元素 (跟E1要是手足且在他之後第一個出生的)

進階版同層相鄰選擇器範例: 幫醜醜的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;
}

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


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


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

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



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



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


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


<小補充>content 屬性可放置的內容
(1) 文字

(2) unicode

(3) attr(data-*)

(4) url(“圖片連結”)

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

以下是一個例子：


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

Item 1
Item 2
Item 3

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

反白
::selection