“在 CSS 中，選擇器是一種模式，用於選擇需要添加樣式的元素。”最新的選擇器版本是CSS3，但使用廣泛的仍是CSS1和CSS2。
選擇器分為三種：基本選擇器、復合選擇器和偽元素選擇器。
一、選擇器匯總
選擇器 |
例子 |
例子描述 |
CSS |
.class
.intro
選擇 class="intro" 的所有元素。
1
#id
#firstname
選擇 id="firstname" 的所有元素。
1
*
*
選擇所有元素，包括html和body元素。
2
element
p
選擇所有 <p> 元素。
1
element,element
div,p
選擇所有 <div> 元素和所有 <p> 元素。
1
element element
div p
選擇 <div> 元素內部的所有 <p> 元素。
1
element>element
div>p
選擇父元素為 <div> 元素的所有 <p> 元素。
2
element+element
div+p
選擇緊接在 <div> 元素之後的所有 <p> 元素。
2
[attribute]
[target]
選擇帶有 target 屬性所有元素。
2
[attribute=value]
[target=_blank]
選擇 target="_blank" 的所有元素。
2
[attribute~=value]
[title~=flower]
選擇 title 屬性包含單詞 "flower" 的所有元素。
2
[attribute|=value]
[lang|=en]
選擇 lang 屬性值以 "en" 開頭的所有元素。
2
:link
a:link
選擇所有未被訪問的鏈接。
1
:visited
a:visited
選擇所有已被訪問的鏈接。
1
:active
a:active
選擇活動鏈接。
1
:hover
a:hover
選擇鼠標指針位於其上的鏈接。
1
:focus
input:focus
選擇獲得焦點的 input 元素。
2
:first-letter
p:first-letter
選擇每個 <p> 元素的首字母。
1
:first-line
p:first-line
選擇每個 <p> 元素的首行。
1
:first-child
p:first-child
選擇屬於父元素的第一個子元素的每個 <p> 元素。
2
:before
p:before
在每個 <p> 元素的內容之前插入內容。
2
:after
p:after
在每個 <p> 元素的內容之後插入內容。
2
:lang(language)
p:lang(it)
選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。
2
element1~element2
p~ul
選擇前面有 <p> 元素的每個 <ul> 元素。
3
[attribute^=value]
a[src^="https"]
選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。
3
[attribute$=value]
a[src$=".pdf"]
選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。
3
[attribute*=value]
a[src*="abc"]
選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。
3
:first-of-type
p:first-of-type
選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
3
:last-of-type
p:last-of-type
選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
3
:only-of-type
p:only-of-type
選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
3
:only-child
p:only-child
選擇屬於其父元素的唯一子元素的每個 <p> 元素。
3
:nth-child(n)
p:nth-child(2)
選擇屬於其父元素的第二個子元素的每個 <p> 元素。
3
:nth-last-child(n)
p:nth-last-child(2)
同上，從最後一個子元素開始計數。
3
:nth-of-type(n)
p:nth-of-type(2)
選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。
3
:nth-last-of-type(n)
p:nth-last-of-type(2)
同上，但是從最後一個子元素開始計數。
3
:last-child
p:last-child
選擇屬於其父元素最後一個子元素每個 <p> 元素。
3
:root
:root
選擇文檔的根元素。
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
選擇被用戶選取的元素部分。
3
二、基本選擇器
1. 通用選擇器：*
2. 元素選擇器：直接用元素名稱作為選擇器名
3. ID選擇器：#ID
4. 類選擇器：.類名，指定一類元素的樣式；元素.類名，指定某類裡面的特定元素的樣式；一個元素可以包含多個樣式，如：<span class="abc def">here</span>
5. 屬性選擇器：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[href] { //屬性選擇器，CSS2
color:orange;
}
[type="password"] { //匹配屬性值的屬性選擇器，CSS2
border:1px solid red;
}
[href^="http”] { //屬性值開頭匹配的屬性選擇器，CSS3
color:orange;
}
[href$=".cn"]{ //屬性值結尾匹配的屬性選擇器，CSS3
color:red;
}
[href*="baidu"] { //屬性值包含指定字符的屬性選擇器，CSS3
color:blue;
}
三、復合選擇器
1. 分組選擇器
1
2
3
p,.abc,#name,[href] {
color:red;
}
2. 後代選擇器：子代的深度不限
1
2
3
#name b {
color:orange;
}
3. 子代選擇器：僅選擇下一層內的子元素
1
2
3
#name > b {
color:blue;
}
4. 相鄰兄弟選擇器：匹配與第一個元素緊鄰的第二個元素
1
2
3
p + b {
color:red;
}
5. 普通兄弟選擇器：匹配第一個元素後出現的所有第二個元素
1
2
3
p ~ b {
color:red;
}
四、偽選擇器
偽選擇器都需要加上前置選擇器來限定范圍，否則默認范圍是<body>。
1. 偽元素選擇器：前置兩個冒號::
①::first-line 塊級首行（每一塊的第一行），示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<style>
::first-line {
color:red;
}
div::first-line{
color:orange;
}
<style>
</head>
<body>
<p>this is red</p>
<div>this is orange</div>
</body>
②::first-letter 塊級首字母
③::before,::after 在元素前插入，在元素後附加，示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<style>
a::before {
content:"點擊";
}
a::after {
content:"搜索";
}
<style>
</head>
<body>
<a href="www.baidu.com">百度</a>
</body>
④::selection 設置鼠標選定時的文字顏色
2. 偽類選擇器：前置一個冒號:
①結構性偽類選擇器：根據元素在文檔中的位置選擇元素
1
2
3
:root {
border:1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<head>
<style>
ul > li:first-child {
color:red;
}
ul > li:last-child {
color:blue;
}
ul > li:only-child {
color:green;
}
div > p:only-of-type { //第一個元素僅包含一個第二個元素的選擇器
color:orange;
}
<style>
</head>
<body>
<ul>
<li>第一個子元素紅色</li>
<li>第二個子元素</li>
<li>第三個子元素藍色</li>
</ul>
<ul>
<li>唯一一個子元素綠色</li>
</ul>
<div>
<p>橙色</p>
<span>文字</span>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>
<style>
ul > li:nth-child(1) { //正數第一個
color:red;
}
ul > li:nth-last-child(1) { //倒數第一個
color:blue;
}
div > p:nth-of-type(2) { //第一個元素內，第二種元素的第二個
color:green;
}
div > p:nth-last-of-type(2) { //第一個元素內，第二種元素的倒數第二個
color:orange;
}
<style>
</head>
<body>
<ul>
<li>第一個子元素紅色</li>
<li>第二個子元素</li>
<li>第三個子元素藍色</li>
</ul>
<div>
<p>文字</p>
<span>文字</span>
</div>
<div>
<p>橙色</p>
<p>綠色</p>
</div>
</body>
②UI偽類選擇器：根據元素的狀態匹配元素，主要用在表單裡面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<head>
<style>
input:enabled {
border:1px solid blue;
}
input:disabled {
border:1px solid pink;
}
input:checked {
display:none //隱藏該元素
}
input:valid {
border:1px solid green;
}
input:invalid {
border:1px solid red;
}
input:required {
border:1px solid orange;
}
/*input:optional {
border:1px solid yellow;
}*/
<style>
</head>
<body>
<form>
藍色邊框：<input type="text"><br>
粉色邊框：<input type="text" disabled><br>
勾選框在這裡：<input type="checkbox"><br>
勾選框隱藏了：<input type="chechbox" checked><br>
輸入非郵箱會有紅色邊框，輸入郵箱會有綠色邊框：<input type="email"><br>
橙色邊框：<input type="text" required><br>
<button>提交</button>
</form>
</body>
③動態偽類選擇器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<head>
<style>
a:link { //超鏈接未點擊時的樣式
color:red;
}
a:visited { //超鏈接點擊後的樣式
color:yellow;
}
a:hover { //鼠標懸停時超鏈接的樣式
color:orange;
}
a:active {
color:green; //鼠標點擊時超鏈接的樣式
}
input:focus {
border:1px solid red; //輸入框獲得焦點時的樣式
}
<style>
</head>
<body>
<a href="www.baidu.com">百度</a>
<form>
<input type="text"><br>
<input type="text"><br>
</form>
</body>
④其他偽類選擇器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
<style>
a:not([href*="baidu"]) { //反選，含baidu以外的超鏈接都變紅色
color:red;
}
:empty { //空元素，如<p></p>
display:none;
}
:lang(en) { //語言屬性為en的文字設為藍色
color:blue;
}
:target { //通過錨點定位到該元素時文字變綠
color:green; //錨點定位地址：...index.html#myTarget
}
<style>
</head>
<body>
<a href="www.baidu.com">百度</a>
<a href="www.google.com">谷歌</a>
<form>
<input type="text"><br>
<input type="text"><br>
</form>
<p></p>
<b id="myTarget">錨點定位時變綠</b>
</body>
本文出自 “Julia's Study Note” 博客，請務必保留此出處http://juliastudynote.blog.51cto.com/9954906/1657493