關於CSS3選取器的詳細介紹及用法總結

CSS3新增了很多強大的選取器

它可以讓我們少寫一些js事件指令碼
我們先來看看各個版本的選取器有哪些
註：
ele代表element元素
attr代表attribute屬性，val代表value屬性值
:xxx都屬於偽類別選取器，::xxx都屬於虛擬元素選取器
有名字的選取器我盡量細分了

CCS1選取器

選取器	類型	樣本	說明
.class	類別選取器	.demo	選擇所有class包含demo的元素
#id	ID選取器	#unique	選擇所有id是unique的元素
ele	元素選取器	p	選擇所有p元素
ele,ele	並欄選取器	h1,h2	選擇所有h1元素和h2元素
ele ele	後代選取器	p p	選擇p元素內的所有p元素
:link	偽類別選取器	a:link	選擇未訪問連結
:visited	偽類別選取器	a:visited	選擇訪問過連結
:active	偽類別選取器	a:active	選擇活動連結
:hover	偽類別選取器	a:hover	選擇滑鼠懸浮連結
::first-letter	首字母選取器	p:first-letter	選擇每一個p元素的第一個字母
::first-line	首資料列選取器	p:first-line	選擇每一個p元素的第一行

CSS1版本有我們最常使用的經典選取器
::first-letter和::first-line好像很少用
CSS2中，他倆只能應用在段落之類的區塊層級元素，超連結等行內元素就不能用了
CSS2.1中，：first-letter可以應用所有元素
但是他們可以使用的屬性還是有限制的
這裡就不列出來了，畢竟不常用

連結的偽類別選取器（錨偽類）我們通常這樣用

a:link {color: blue;}             /*靜態偽類：未訪問連結時藍色*/a:visited {color: purple;}        /*靜態偽類：訪問過的連結變為紫色*/a:hover {color: red;}             /*動態偽類：滑鼠懸浮在連結上變為紅色*/a:active {color: orange;}         /*動態偽類：滑鼠按下連結時變為橘黃色*/

link-visited-hover-active（LVHA） 是推薦的順序，不會覆蓋產生衝突
也很好記“綠化LVHuA”

CSS2選取器

選取器	類型	樣本	說明
*	通配選取器	*	選擇所有元素
ele>ele	直接子項目選取器	p>p	選擇父級是p元素的p元素
ele+ele	相鄰兄弟元素選取器	p+p	選擇緊挨著p元素之後的一個p元素
[attr]	屬性選取器	[target]	選擇帶有target屬性的元素
[attr=val]	屬性選取器	[target=_blank]	選擇有target屬性並且屬性值是_blank的元素
[attr~=val]	屬性選取器	[title~=demo]	選擇有title屬性並且包含單詞”demo”的元素
[attr|=language]	屬性選取器	[lang|=en]	選擇lang屬性的起始值為EN的元素
:focus	焦點選取器	input:focus	選擇具有焦點的input元素
:first-child	首子級選取器	p:first-child	選擇p元素是其父級的第一個子級的元素
::before	虛擬元素選取器	p::before	在p元素之前插入內容
::after	虛擬元素選取器	p::after	在p元素之後插入內容
:lang(language)	偽類別選取器	p:lang(it)	選擇lang屬性的起始值是it的p元素

這裡需要注意的有p+p相鄰兄弟元素選取器
選擇的是緊挨著p元素後的一個p元素，
發現一些網站和書上寫的都是所有p元素，但我驗證了一下發現好像不對

title~demo是說title屬性包含demo這個詞，屬性值之間用空格分隔的單詞
像這樣<img title="demo demo1 demo2"></img>是可以選中的
但是<img title="demo1 demo2"></img>就不能夠選中

語言的選取器不常用過就不說了

::before和::after虛擬元素選取器要想新增內容，需要使用content屬性

p::before {    content: "123";}

我們用after的時候很多時候是為了清除浮動

p::after {    content: "";    display: block;    clear: both;}

至於為什麼就不是今天討論的範疇了(￣_,￣ )

偽類與虛擬元素

虛擬元素選取器寫成偽類單冒號的形式沒什麼問題
但是偽類別選取器使用雙冒號就不能選擇元素了

這裡說一下偽類和虛擬元素的區別
偽類我的理解是元素達到一種狀態
狀態存在，改變樣式；狀態消失，樣式消失
虛擬元素應該說是操作元素的特定內容
實在分不清都寫成單冒號的形式就好了

CSS3選取器

敲這麼多終於到關鍵地方了
CSS3增加了很多強大的選取器，以偽劣選取器為主
CSS1和CSS2版本的選取器加起來都沒它多
我們一起來看一下

選取器	類別	樣本	說明
ele~ele	後兄弟元素選取器	p~p	選擇p元素之後的所有p元素
[attr^=val]	屬性選取器	a[src^=https]	選擇src屬性值以https開頭的元素
[attr$=val]	屬性選取器	a[src$=\.pdf]	選擇src屬性值以.pdf結尾的元素
[attr*=val]	屬性選取器	a[src*=demo]	選擇src屬性的值包含子字串demo的元素
:first-of-type	偽類別選取器	p:first-of-type	選擇每個p元素是其父級的第一個p元素
:last-of-type	偽類別選取器	p:last-of-type	選擇每個p元素是其父級的最後一個p元素
:only-of-type	偽類別選取器	p:only-of-type	選擇每個p元素是其父級的唯一p元素
:only-child	唯一子項目選取器	p:only-child	選擇每個p元素是其父級的唯一子項目
:nth-child(n)	偽類別選取器	p:nth-child(2)	選擇每個p元素是其父級的第二個子項目
:nth-last-child(n)	偽類別選取器	p:nth-last-child(2)	選擇每個p元素的是其父級的倒數第二個子項目
:nth-of-type(n)	偽類別選取器	p:nth-of-type(2)	選擇每個p元素是其父級的第二個p元素
:nth-last-of-type(n)	偽類別選取器	p:nth-last-of-type(2)	選擇每個p元素的是其父級的倒數第二個p元素
:last-child	偽類別選取器	p:last-child	選擇每個p元素是其父級的最後一個子項目
:root	根項目選取器	:root	選擇文檔根項目
:empty	空標籤選取器	p:empty	選擇無任何子項目（包括文本節點）的p元素
:target	目標元素選取器	new:target	選擇當前活動的#new元素（包含錨名稱點擊的URL）
:enabled	偽類別選取器	input:enabled	選擇已啟用的input元素
:disabled	偽類別選取器	input:disabled	選擇禁用的input元素
:checked	偽類別選取器	input:checked	選擇選中的input元素
:not(selector)	否定選取器	:not(p)	選擇不是p元素的元素
::selection	高亮文本選取器	::selection	匹配元素中被使用者選中或處於高亮狀態的部分
:out-of-range	偽類別選取器	:out-of-range	選擇值在指定區間之外的input元素
:in-range	偽類別選取器	:in-range	選擇值在指定區間之內的input元素
:read-write	讀寫元素選取器	:read-write	選擇可讀並且可寫的元素
:read-only	唯讀元素選取器	:read-only	選擇設定了readonly屬性的唯讀元素
:optional	偽類別選取器	:optional	選擇可選的input元素
:required	偽類別選取器	:required	選擇設定了required屬性的元素
:valid	合法元素選取器	:valid	選擇輸入值合法的元素
:invalid	非法元素選取器	:invalid	選擇輸入值非法的元素

屬性選取器

[attr^=val]，[attr$=val]，[attr*=val] 這三個屬性選取器放在一起記
也很好記，很想我們Regex中用的開頭匹配符^，結尾匹配符$，統配匹配符*
同時還要區別於CSS2中的[attr~=val]

<p class="demo demo1">1</p><p class="demo demo2">2</p><p class="demo demo3">3</p>

[class^=de]可以把三行都選中，因為它們的class屬性都是以“de”開頭的
[class$=o2]可以選中第二行，因為只有它的class屬性是以“o2”結尾的
[class*=em]同樣可以選中三行，因為它們class的都包含字串“em”
[class~=de]不能選中任何行，因為它class中以空格分隔的屬性值中沒有“de”的屬性值

說到這個屬性選取器，我還要多說一點
我在表格中的樣本是這麼寫的 a[src$=\.pdf]
是因為“.”它不認識，我們需要加“\”轉義
不過css中屬性選取器也可以寫成引號的形式
比如說下面代碼時等價的
a[src$=\.pdf]
a[src$=".pdf"]
a[src$='.pdf']

子項目選取器

下面的一堆什麼type、child的選取器都是針對子項目在父元素中的位置的
表格中列出的很詳細了
我主要談談type、child的區別，
以最簡單的:first-child和:first-of-type為例

<p>0</p><p>1</p><p>2</p><p>3</p>

p:first-child{    background-color: red;}

使用first-child我們發現頁面沒有變化
這是因為p並不是body元素的第一個子項目

p:first-of-type{/*改*/    background-color: red;}

改為first-of-type我們發現第一個p變紅了
這是因為它是body元素的子項目中所有p的第一個

其他的也是一樣的道理，舉一反三

根項目選取器

:root這個選取器沒什麼意思，和你直接使用html一樣

:root {...}html {...}

空元素選取器

:empty就是選擇真正的空元素，內部沒有任何子項目，文本節點也不能有
舉個例子

<p></p><p>1</p><p>2</p><p>3</p>

p:empty::before {    content: "12345";    background-color: gold;}

目標元素選取器

這個:target選取器還有點意思
寫一個例子

<a href="#first">1st</a><br><a href="#second">2nd</a><br><a href="#third">3rd</a><br><a href="#fourth">4th</a><br><a href="#fifth">5th</a><br><br><br><br><br><br><p id="first">1</p><p id="second">2</p><p id="third">3</p><p id="fourth">4</p><p id="fifth">5</p>

body {    height: 2000px;}p {    width: 200px;    height: 200px;    font: 200px/200px bold;}

這是一個小demo可以利用錨點在頁面中進行跳轉
點選連結可以跳轉到對應id的元素，並且url連結也發生了改變

此時就會觸發:target的樣式
我們來試一試，加幾行代碼

p:target {    background-color: deeppink;}

再點選連結

我們發現，跳轉的同時，p樣式改變了

高亮文本選取器

::selection是CSS3新增的選取器
它用來匹配反白的文本（用滑鼠選擇文本）
瀏覽器有預設的樣式（背景為藍色，字型為）

<p>this is a long long text...</p>

p::selection{    color: white;    background-color: dodgerblue;}

瀏覽器預設的樣式就是相當於這樣，我們可以自己修改

否定選取器

:not()這個選取器可以排除某些特定條件的元素
比如說我們可以這樣用

<p class="demo">1</p><p>2</p><p>3</p>

p:not(.demo) {    background-color: aqua;}

這樣類屬性中有demo的元素就不會變色

CSS小圖表

剩下的選取器大部分都是針對input輸入標籤的
不詳細講了
我們做一個小練習，僅僅用CSS3的選取器做一個點擊按鈕切換圖片的小圖表
通過點擊單選框顯示不同的圖片
像這樣

首先我們需要編寫html代碼
使用三個radio和三個img元素

<input type="radio" name="demo" id="a" checked><img src="a.jpg" ><input type="radio" name="demo" id="b"><img src="b.jpg"><input type="radio" name="demo" id="c"><img src="c.jpg">

然後css部分通過:checked配合條件選取器控制img元素的顯示

input {    margin-left: 35px;}img {    display: none;}:checked+img {    position: absolute;    left: 10px;    top: 40px;    display: inline-block;}

這樣我們就完成了我們的小圖表功能

整理了一晚上的選取器，可能會有遺漏的
如果想起來，日後再補吧