2016年5月5日 星期四

[ 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屬性且值是以jpg為結尾的所有元素
: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
選擇所有被選中的內容
標籤：