Miles' Blog

天涯何處無幹話，何必要講實務話

Selector

List of Selector

Version Selector Example Description Remark
1 .class .className class="className" 屬性的元素
1 #id #idName id="idName" 屬性的元素
2 * * 所有元素
1 element p 所有 <p> 元素
1 element, element div, p 所有 <div> 元素和所有 <p> 元素
1 element element div p <div> 元素內部所有 <p> 元素
2 element>element div>p 父元素為 <div> 元素的所有 <p> 元素
2 element+element div+p 在相同的父元素下，緊臨在 <div> 元素之後的 <p> 元素
2 [attribute] [type] 帶有 type 屬性的所有元素
2 [attribute=value] [type=password] type="password" 屬性的所有元素
2 [attribute~=value] [title~=word] title 屬性，包含單字 word 的所有元素
2 %%[attribute =value]%% `[title =word]`
1 :link a:link 所有未被點擊過的連結 只適用於<a>
1 :visited a:visited 所有已被點擊過的連結 只適用於<a>
1 :active div:active 被點擊的元素 有點像 onClick 事件
1 :hover span:hover 被滑過的元素 有點像 onHover 事件
2 :focus input:focus 取得焦點的元素 有點像 onFocus 事件
1 :first-letter p:first-letter <p> 元素的首字
1 :first-line p:first-line <p> 元素的首行
2 :first-child p:first-child <p> 元素的首行
2 :before p:before 在 <p> 元素的內容之前插入新的內容 使用 content 屬性設定文字內容
2 :after p:after 在 <p> 元素的內容之後插入新的內容 使用 content 屬性設定文字內容
2 :lang(language) p:lang(en) lang 屬性為 en 開頭的 <p> 元素
3 element1~element2 p~ul 在相同的父元素下，<p> 之後的所有 <ul> 元素
3 %%[attribute^=value]%% %%a[src^="https"]%% <a> 元素的 src 屬性，以 https 開頭
3 %%[attribute$=value]%% %%a[src$=".pdf"]%% <a> 元素的 src 屬性，以 .pdf 結尾
3 %%[attribute*=value]%% %%a[src*="abc"]%% <a> 元素的 src 屬性，包含子字串 abc
3 :first-of-type p:first-of-type 在相同的父元素下，第一個 <p> 元素
3 :last-of-type p:last-of-type 在相同的父元素下，最後一個 <p> 元素
3 :only-of-type p:only-of-type 在相同的父元素下，唯一一個 <p> 元素
3 :only-child p:only-child 在相同的父元素下，唯一的子元素 <p>
3 :nth-child(n) p:nth-child(n) 在相同的父元素下，第 n 個子元素 <p> n
3 :nth-last-child(n) p:nth-last-child(n) 在相同的父元素下，倒數第 n 個子元素 <p> n
3 :nth-of-type(n) p:nth-of-type(n) 在相同的父元素下，第 n 個 <p> 元素 n
3 :nth-last-of-type(n) p:nth-last-of-type(n) 在相同的父元素下，倒數第 n 一個 <p> 元素 n
3 :last-child p:last-child 在相同的父元素下，最後一個子元素 <p>
3 :root :root DOM 的根元素
3 :empty p:empty 沒有子元素的 <p> 元素
3 :target #news:target 當前被選擇的錨點 #news 元素
3 :enabled input:enabled 每個被啟用的 <input> 元素
3 :disabled input:disabled 每個被禁用的 <input> 元素
3 :checked input:checked 每個被選取的 <input> 元素
3 :not(selector) :not(p) <p> 以外的所有元素
3 ::selection ::selection

Class Selector

Class選擇器，. 開頭，後面接 class 屬性的名稱，名稱命名方法參考

一個網頁可以有多個 class 屬性，如：

<p class="tip">段落一</p>
<p class="tip">段落二</p>
<p class="notice">段落三</p>

程式碼如下：

.tip { color: blue; } /* 段落一二會是藍色 */
.notice { color: red; } /* 段落三會是紅色 */

ID Selector

# 開頭，後面接 id 屬性的名稱，名稱命名方法參考 (同 class selector)

一個網頁只能有一個 id 屬性，如：

<p id="tip">段落一</p>
<p id="notice">段落二</p>

程式碼如下：

#tip { color: blue; } /* 段落一會是藍色 */
#notice { color: red; } /* 段落二會是紅色 */

Type Selector

型態選擇器，是直接設定在 html 標籤上。

h1 { color: blue; } /* 所有 h1 標籤會是藍色 */
p { color: red; } /* 所有 p 標籤會是紅色 */

Universal Selector

通用選擇器，使用萬用字元 *，所有元素都會套用設定。

* { color: red; } /* 所有元素都會被設定紅色 */

Groups of Selectors

選擇器群組，參考以下程式碼：

h1 { color: red; }
h2 { color: red; }
h3 { color: red; }

它與下面相等價：

h1, h2, h3 { color: red; }

注意: 要全部選擇器都是合法的選擇器，等價才會成立；只要其中有一個選擇器不合法，則全部都會失效。

0%