2016年7月24日 星期日

[ CSS ]CSS選擇器列表

選擇器 範例 說明
.class .header 選擇class="header"的所有元素
#id #name 選擇id="name"的所有元素
* * 選擇所有元素(通常用於reset樣式)
element p 選擇所有<p>元素
element,element h1,h2 選擇所有<h1>和<h2>元素
element element div a 選擇所有在<div>內的所有<a>元素(可以為子元素、孫元素、曾孫元素…)
element>element div>p 選擇所有父元素為<div>的<p>元素
element+element h1+p 選擇所有緊接在<h1>元素後的第一個<p>元素
element~element p~ul 選擇在<p>元素之後的每一個<ul>元素
[attr] [data-tooltip] 選擇所有附帶有data-tooltip屬性的元素
[attr=value] [target=_blank][target="_blank"] 選擇附帶有target屬性且值為_blank的所有元素
[attr~=value][attr*=value] [title~=subject][title*="subject] 選擇附帶有title屬性且值包含單詞subject的所有元素
[attr|=value][attr]^=value] [href|=http][href^="http"] 選擇附帶有href屬性且值是以http為開頭的所有元素
[attr$=value] [src$="jpg"] 選擇附帶有src屬性且值是以為結尾的所有元素
:link a:link 選擇所有未被訪問過的連結
:visited a:visited 選擇所有已被訪問過的連結
:active a:active 選擇正在作用中的連結
:hover a:hover 選擇滑鼠指標停留其上的連結
:focus input:focus 選擇獲得焦點的<input>元素
:first-letter span:first-letter 選擇所有<span>元素中的第一個字元
:first-line span:first-line 選擇所有<span>元素中的第一行文字
:first-child ul li:first-child 選擇所有父元素為<ul>的第一個<li>元素
:before p:before 在所有<p>元素前插入內容
:after p:after 在所有<p>元素後插入內容
:lang(language) p:lang(en) 選擇所有帶有lang屬性且值是以en為開頭的所有<p>元素
:first-of-type a:first-of-type 選擇所有在同層內的第一個<a>元素
:last-of-type a:last-of-type 選擇所有在同層內的最後一個<a>元素
:only-of-type a:only-of-type 選擇所有在同層內只有唯一一個的<a>元素
:only-child span:only-child 選擇所有在同層內只有唯一一個元素且其為<span>標籤的元素
:nth-child(n) li:nth-child(2) 選擇所有在同層內的第二個<li>元素
:nth-last-child(n) li:nth-last-child(2) 選擇所有在同層內的倒數第二個<li>元素
:last-child li:last-child 選擇所有在同層內的最後一個<li>元素
:root :root 選擇該文件的根元素(一般而言就是指<html>)
:empty p:empty 選擇所有內部沒有任何元素的<p>元素
:target p:target 選擇目前正在作用中的<p>元素
:enabled input:enabled 選擇所有可使用的<input>元素
:disabled input:disabled 選擇所有不可使用的<input>元素
:checked input:checked 選擇所有被選取到的<input>元素
:not(selector) div:not(p) 選擇所有在<div>元素內不是<p>元素的其他元素
::selection ::selection 選擇所有被選中的內容
標籤：