CSS選擇器

全體選擇器

universal selector

*

選擇頁面上的所有元素

type選取器

div

class選取器

.chrisClass1

ID選取器

#chrisID

:

同樣屬於class的一種

可說是CSS本身提供的分類

優先權同class

錨點虛擬類別

尚未點擊

滑鼠碰觸

點擊當下

取得焦點

點擊過後

在撰寫上需注意順序

由於虛擬類別的優先權同於class，會遇到後者覆寫前者的規則問題

狀態虛擬類別

:checked

:unchecked

:enabled

:disabled

序列虛擬類別

:empty

code:css

dd:empty::before {

contetn: "-";

}

:not()

*-child

第一個子元素

最後一個子元素

第幾個子元素（從1數起，不是從0）

:nth-child(2n)

偶數的子元素（2的倍數）

:nth-child(2n+1)

奇數的子元素

:nth-child(n of selector)

:nth-child(odd)

even

從後面數來第幾個子元素

父元素內只有一個子元素

*-of-type

:first-of-type

同一種元素的第一個

:last-of-type

同一種元素的最後一個

:nth-of-type(數字)

同一種元素裏頭的第幾個

:nth-last-of-type(數字)

同一種元素從後面屬過來第幾個

:only-of-type

只有這種元素

::

應用於裝飾性的物件上

:: before（:before）

在原本的元素「之前」加入內容

:: after（:after）

在原本的元素「之後」加入內容

none

normal

string

url

counter

attr

open-quote

close-quote

no-open-quote

no-close-quote

attribute屬性選取器

指定屬性選擇器

presence and value selectors

selector[attritube=vaule]

[attribute~=value]

選定多個以空格隔開的attribute其中之一的值為value的元素

[attribute|=value]

常用於選定語言子碼

局部屬性選擇器

substring matching attribute selectors

[attribute^='value']

選定attribute值以value開頭／前綴的元素

[attribute$='value']

選定attribute值以value結尾／後綴的元素

[attribute*='value']

選定attribute值中包含value的元素

::selection

::first-line（: first-line）

::first-letter（: first-letter）

::cue（: cue）

::backdrop

::placeholder

::marker

::spelling-error

::grammar-error

通常用於存放CSS變數用

code:css

:root {

--width: 100vw;

--max-width: 100vw;

@media (min-width: 42em) {

--width: 42rem;

}

}