CSS3新增了很多強大的選擇器
它可以讓我們少寫一些js事件指令碼
我們先來看看各個版本的選擇器有哪些
注：
ele代表element元素
attr代表attribute屬性，val代表value屬性值
:xxx都屬於偽類選擇器，::xxx都屬於偽元素選擇器
有名字的選擇器我儘量細分了

CCS1選擇器

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選擇器

這裡需要注意的有div+p相鄰兄弟元素選擇器
選擇的是緊挨著div元素後的一個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的時候很多時候是為了清除浮動

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

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

偽類與偽元素

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

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

CSS3選擇器

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

屬性選擇器

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

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

[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>
<div>1</div>
<div>2</div>
<div>3</div>

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

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

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

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

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

根元素選擇器

: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>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
<div id="fifth">5</div>

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

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

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

div:target {
    background-color: deeppink;
}

再點選連結

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

高亮文字選擇器

::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;
}

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

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