css選擇器用法較多,不經常使用的選擇器容易遺忘,因而在這裏整理出css選擇器的基本用法,以備查用。css
*
: 通配符,匹配任何元素html
例:* { color: red }
app
#id
: id 選擇器this
例:匹配全部 id 屬性爲 app 的元素spa
#app { color: red }
code
.class
: class 選擇器htm
匹配全部 class 屬性爲 btn 的元素繼承
例:.btn { color: red }
element
element
: 元素選擇器文檔
匹配全部 div 標籤
例:div { color: red }
HTML:
<div title="myBtn Button" lang="en-us" />
複製代碼
CSS 2.1
[attribute]
: 匹配全部帶有 attribute 屬性的元素
[title] { color: red; }
[attribute="x"]
: 匹配全部 attribute 屬性爲 x 的元素
[title=myBtn] { color: red; }
[attribute~="x"]
: 匹配全部 attribute 屬性具備多個空格分隔的值,其中一個值等於 x 的元素
[title~="Button"] { color: red; }
[attribute|="x"]
: 匹配全部 attribute 屬性具備連字符-
分隔的值,其中一個值以 x 開頭的元素
[lang|="en"] { color: red; }
CSS 3
[attribute^="x"]
: 匹配屬性 attribute 的值以 x 開頭的元素
[title^=my] { color: red; }
[attribute$="x"]
: 匹配屬性 attribute 的值以 x 結尾的元素
[title$=Button] { color: red; }
[attribute*="x"]
: 匹配屬性 attribute 的值包含 x 的元素
[title*=Btn] { color: red; }
HTML:
<div>
<a lang="en" href="http://xinghunm.com" target="_blank">Xinghunm.com</a>
</div>
複製代碼
CSS 2.1
如下的 E、F 指 selector 匹配到的元素,其自己就是 selector。
E:first-child
: 匹配元素 E 當它是其父元素的第一個子元素
a:first-child { color: red; }
E:link
: 匹配未被訪問(未點擊或跳轉)的連接
a:link { color: black; }
E:visited
: 匹配已訪問過的連接
a:visited { color: green; }
E:hover
: 匹配鼠標懸停其上的元素
:hover
必須在:link
和:visited
以後才能看到效果。
a:hover { color: blue; }
E:active
: 匹配鼠標按下還未擡起的元素
:active
必須在:hover
以後才能看到效果。
a:active { color: red; }
E:focus
: 匹配獲取當前焦點的元素
a:focus { color: yellow; }
E:lang(x)
: 匹配 lang 屬性等於 x 的元素
a:lang(en) { color: red; }
CSS 3
HTML:
<div>
<h1>this is h1</h1>
<h3>first-of-type h3</h3>
<h3>last-of-type h3</h3>
<ul>
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
</ul>
<div id="tab1">this is tab1</div>
<div id="tab2">this is tab2</div>
<p><span>only child</span></p>
<p></p>
<input id="input1" />
<input id="input2" disabled="disable" />
<input id="input3" type="checkbox" />
</div>
複製代碼
E:target
: URL 後跟錨點#,指向文檔內某個具體的元素,這個被連接的元素就是目標元素,E:target
選 擇器用於選取當前活動的目標元素 當咱們點擊列表 tab1 時,由於其錨點連接的元素就是 id 爲 tab1 的元素,因此此時活動的目標元素就是 id 爲 tab1 的 div,經過 div:target 就能夠獲取此目標元素。
div:target { background: red; }
:not(selector)
: 匹配與 selector 選擇器描述不相符的元素
div :not(div) { color: red; }
E:enabled
: 匹配表單中激活的元素
#input1:enabled { background: red; }
E:disabled
: 匹配表單中禁用的元素
#input2:disabled { background: black; }
E:checked
: 匹配表單中被選中的 radio(單選框)或 checkbox(複選框)
#input3:checked { margin: 20px; }
CSS3 結構性僞類
:root
: 匹配根元素,對應 HTML 文檔就是 html 元素
:root { color: red; }
E:nth-child(n)
: 匹配元素 E 當它是其父元素的第 n(從 1 開始)個子元素 列表 tab1 是其父元素 ul 的第一個元素,所以能夠匹配到列表 tab1
li:nth-child(1) { color: red; }
E:nth-last-child(n)
: 匹配元素 E 當它是其父元素的倒數第 n(從 1 開始)個子元素 列表 tab2 是其父元素 ul 的倒數第一個子元素,所以能夠匹配到列表 tab2
li:nth-last-child(1) { color: red; }
E:last-child
: 匹配元素 E 當它是其父元素的倒數第 1 個子元素
li:last-child() { color: red; }
E:only-child
: 匹配元素 E 當它是其父元素的惟一一個子元素
span:only-child() { color: red; }
E:nth-of-type(n)
: 匹配元素 E 當它是其父元素的第 n(從 1 開始)個出現的與 E 類型相同的子元素
匹配<div id="tab2">this is tab2</div>
div:nth-of-type(2) { color: red; }
E:nth-last-of-type(n)
: 匹配元素 E 當它是其父元素的倒數第 n(從 1 開始)個出現的與 E 類型相同的子元素
匹配<div id="tab1">this is tab1</div>
div:nth-last-of-type(2) { color: red; }
E:first-of-type
: 匹配元素 E 當它是其父元素的第 1 個出現的與 E 類型相同的元素子元素(可能有多個)
h3:first-of-type { color: red; }
E:last-of-type
: 匹配元素 E 當它是其父元素的倒數第 1 個出現的與 E 類型相同的元素子元素(可能有多個)
h3:last-of-type { color: red; }
E:only-of-type
: 匹配元素 E 當它是其父元素下惟一一個 E 類型的元素
h1:only-of-type { color: red; }
E:empty
: 匹配元素 E 當沒有子元素或內容時
p:empty{ color: red; }
HTML:
<div>
<p>12<br>34</p>
</div>
複製代碼
CSS 2.1
::first-line
: 匹配元素的第一行
p::first-line { color: red; }
::first-letter
: 匹配元素的第一個字母
p::first-letter { color: red; }
::before
: 在元素前經過 content 屬性插入內容
p::before { content: "*"; }
::after
: 在元素後經過 content 屬性插入內容
p::after { content: "*"; }
CSS 3
::selection
: 匹配鼠標框選的元素
::selection { color: red; }
HTML:
<div id="div1">
<div id="div2">
<h1>this is dev2 > h1</h1>
<h2>this is dev2 > h2</h2>
</div>
<div id="div3">this is dev3</div>
<div id="div4">this is dev4</div>
<h1>this is div1 > h1</h1>
</div>
複製代碼
E, F
: 多元素選擇器,同時匹配 E 元素和 F 元素
h1, h2 { color: red; }
E > F
: 子元素選擇器,匹配 E 元素的子元素 F
#div2 > h1 { color: red; }
E F
: 後代元素選擇器,匹配 E 元素的後代元素 F
#div1 h2 { color: red; }
E + F
: 相鄰元素選擇器,匹配全部緊隨 E 元素以後的 F 元素 匹配 div3
#div2 + div { color: red; }
E ~ F
: 同級元素選擇器,匹配全部 E 元素以後的同級元素 F 匹配 div3,div4
#div2 ~ div { color: red; }
!important > 行內樣式 > ID > 類、僞類、屬性 > 元素、僞元素 > 繼承 > 通配符