這次和大家一起來聊一聊css3,在前端編程中，html，css，js分別被稱之爲前端編程中的骨，肉，魂。
html搭建前端頁面的結構，就像是人的骨骼一般，支撐整個頁面。
css控制前端頁面顯示的效果和佈局，就像是人的血肉一般，使得整個頁面更加生動，靈活。
js控制前端頁面的業務邏輯，就像是人的靈魂一般，讓頁面能像一個人一樣做該做的事情。
今天，就跟大家來聊聊css3.
所謂的css3是什麼呢？
其實也沒有什麼神祕，就是css(Cascading Style Sheets,層疊樣式表)的第三個版本，相對於之前的css，它有了更多優秀的，適合頁面需要的佈局以及效果。可以說如果我們掌握了css3，那麼我們可以更加靈活的，符合需求的來完成頁面的需求。做出更加美觀，簡潔的頁面。
css3到底需要學習一些什麼樣的東西呢？
css3需要學習的是css3新增的選擇器，樣式屬性。
css3新增的選擇器讓我們可以更加靈活的選擇頁面中的元素併爲其設置樣式。
css3新增的樣式屬性可以讓我們設置頁面的效果和佈局，提供了更多，更加符合需要的樣式屬性。
接下來，我們會分幾次給大家一起來介紹介紹css3新增的這些內容。
而今天我們給大家介紹的主要就是css3新增的選擇器。
1.屬性選擇器
屬性選擇器，顧名思義，是與屬性有關的選擇器，具體來說，是根據標籤是否擁有屬性來進行選擇的選擇器。而css3中新增的屬性選擇器是根據屬性的屬性值所在的位置進行選擇。
A.CSS3 [attribute^=value] 選擇器 ，實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{ width:100px;height:100px; }
p[class^="one"]{ background:pink; }
</style>
</head>
<body>
<p class="one">第一段</p>
<p class="one two three">第二段</p>
<p class="two">第三段</p>
<p>第四段</p>
</body>
</html>
代碼效果如下：
由圖可見，p標籤中擁有class屬性，並且class屬性是以one開頭的標籤元素被設置成了粉紅色的背景顏色，由此可知，CSS3 [attribute^=value] 選擇器的作用就是幫助我們選擇屬性是以某個屬性值開頭的標籤元素。
B.CSS3 [attribute*=value] 選擇器， 實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{ width:100px;height:100px; }
p[class*="two"]{ background:orange; }
</style>
</head>
<body>
<p class="one">第一段</p>
<p class="one two three">第二段</p>
<p class="two">第三段</p>
<p>第四段</p>
</body>
</html>
代碼效果如下：
由圖可見，p標籤中擁有class屬性，並且class屬性值中有two的標籤元素被設置成了橙色的背景顏色，由此可知，CSS3 [attribute*=value] 選擇器的作用就是幫助我們選擇屬性中包含某個屬性值的標籤元素。
C.CSS3 [attribute*=value] 選擇器， 實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{ width:100px;height:100px; }
p[class$="two"]{ background:cyan; }
</style>
</head>
<body>
<p class="one">第一段</p>
<p class="one two three">第二段</p>
<p class="two">第三段</p>
<p>第四段</p>
</body>
</html>
代碼效果如下：
由圖可見，p標籤中擁有class屬性，並且class屬性值以two結尾的標籤元素被設置成了青色的背景顏色，由此可知，CSS3 [attribute$=value] 選擇器的作用就是幫助我們選擇屬性是以某個屬性值結尾的標籤元素。
2.CSS3 element1~element2 選擇器，之後選擇器，先查找到符號左邊的元素，然後以這個元素作爲起始位置查找符號右邊的元素。實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
.two~div{background: pink;}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</body>
</html>
代碼效果如下：
由圖可見，CSS3 .two~div 選擇器是先找到類名爲two的元素然後以該元素作爲起始位置繼續查找div元素，併爲div元素設置背景顏色粉紅色。
3.相對於父元素的僞類選擇器
A.CSS3 element:first-of-type 選擇器。請看案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:first-of-type{background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下:
由圖可見，div:first-of-type選擇器的作用是找到div元素的父元素（即body元素），查找div元素的父元素中的第一個div元素爲其設置樣式。
B.CSS3 element:last-of-type 選擇器
案例：div:last-of-type
該選擇器的作用是找到div元素的父元素，查找div元素的父元素中的第一個div元素爲其設置樣式.
C.CSS3 element:only-of-type 選擇器
案例：p:only-of-type
該選擇器的作用是找到p元素的父元素，並且p元素的父元素中僅僅只有一個p元素，如果有多個p元素，則選擇器無效（除了p元素之外可以有其他元素，如h2,div等）。
D.CSS3 element:only-of-child 選擇器
案例：p:only-of-child
該選擇器的作用是找到p元素的父元素，並且p元素的父元素中僅僅只有一個p元素，也沒有其他的元素，如果p元素的父元素中還有其他任何元素，則選擇器無效。
E.CSS3 element:last-child 選擇器
案例：p:last-child
該選擇器的作用是找到p元素的父元素，再找到p元素的父元素的最後一個子元素，如果該子元素是p元素則選擇器生效，否則無效。
4.相對於父元素第n個元素的僞類選擇器
n選擇器最難理解的就是這個n了，首先大家要知道，n並不是一個確切的數字，n表示的是一個數字的範圍，那這個範圍到底是多少呢？
n是一個增量值，它的開始值是0，n的結束值是選擇元素的總數。
n也可以是數字，代表選擇數字對應的元素。
n也可以是odd或者even，可以選擇奇偶數的元素。
n也可以是表達式，選擇符合表達式的元素。
下面給大家講解幾種僞類選擇器的時候，陸續講解n的幾種形式。
A.CSS3 element:nth-child(n)
1).n如果爲數字形式，案例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:nth-child(2){background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果：
如上圖，div的父元素是body，body有五個子元素，第一個子元素是h2,第二個子元素是div,所以找到body的第二個子元素，而第二個子元素剛好又是div，所以設置了該div爲粉紅色的背景。
2).n如果爲odd，案例代碼如下：
div:nth-child(odd){ background:pink }
該選擇器的作用是找到div元素的父元素，在找到父元素的子元素，找到很多子元素啊，odd的意思就是選擇第奇數個的子元素，即第1,3,5,7,9…個元素。
而nth-child的效果也特別有意思，找到div的父元素中的所有子元素(也包含非div的子元素)中奇數的子元素並且是div的子元素，進行樣式設置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:nth-child(odd){background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下:
如上圖，div的父元素是body，body有五個子元素，第一個子元素是h2,第三個子元素是div，第五個子元素是h2,所以只有第三個子元素符合奇數與div兩個條件，所以設置了粉紅色的背景。
3).n如果爲even，案例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:nth-child(even){background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下：
如上圖，div的父元素是body，body有五個子元素，第二個子元素是div,第四個子元素是div，所以第二個子元素，第四個子元素都是div元素，所以設置了粉紅色的背景。
tips:三個字母的odd是奇數，四個字母的even是偶數，英文不好的朋友們記住了。
4).n如果爲字母n則表示爲一個增量值，案例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:nth-child(n){background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下：
如上圖，div的父元素是body，body有五個子元素，所以n的取值範圍從0開始，到5爲止，那麼div:nth-child(n)選擇的元素是所有div的父元素的子元素，即包含H2和div的所有子元素，但是div:nth-child(n)是選擇div元素，所以div的背景顏色都被設置爲了粉紅色。
特別提示：有的朋友就說了，這n從0開始，到5爲止，0,1,2,3,4,5這是選擇了六個元素啊，只有5個子元素呢。大家要注意了，n值爲0或者超過了元素個數的值無效。即元素是從1開始的，n爲0時是無效的。
5).n如果爲表達式，案例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:nth-child(2n){background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下：
如上圖，div的父元素是body，body有五個子元素，所以n的取值範圍從0開始，到5爲止，那麼div:nth-child(2n)就是將n的值乘以2：02=0,12=2,22=4,32=6,42=8,52=10，那麼2n的值就是0,2,4,6,8,10,但是啊我們都知道在這個案例裏面，子元素一共只有5個，是不可能選擇到第6,8,10個元素的，所以6,8,10無效，0也無效，只有2,4有效。找到第二個，第四個子元素，這兩個子元素又剛好是div元素，符合選擇器，就爲他們設置了背景顏色粉紅色了。
tips:2n的效果和even一致，2n-1的效果與odd一致。
B.CSS3 :nth-last-child選擇器
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:nth-last-child(2){background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下：
如上圖，div:nth-last-child(2)的意思就是找到div的父元素body，找到body的倒數第二個元素，而倒數第二個元素剛好就是一個div元素，就將該div元素的背景設置爲了粉紅色。
小結：child這種僞類選擇器非常有意思，需要先找到我們選擇的元素的父元素，然後通過父元素找到其所有的子元素，然後就是數一下，符合個數，同時符合元素類型的元素就是我們通過child選擇器選擇的內容了。
C.CSS3 :nth-of-type選擇器
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:nth-of-type(2){background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div class="one">1</div>
<div class="one two">2</div>
<div class="one two three">3</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下：
如上圖，div:nth-of-type(2)的意思就是找到div的父元素body，再找到body中的所有div元素中的第二個div元素，由此可以看出 nth-child和nth-of-type 的區別。
element:nth-child(n)是找到父元素中所有的子元素,然後找到符合n條件的子元素，查看符合n條件的子元素是否是element類型的元素(因爲符合n條件的子元素也可能是其他元素類型，不是element類型)，也就是說，nth-child需要符合兩個條件才能選擇成功，第一個是n條件，第二個是元素類型。
element:nth-of-type(n)是找到父元素中所有的子元素中的element元素，然後找到符合n條件的element元素，也就是說，nth-of-type是先找到element類型的元素，然後再找符合n條件的element類型的元素，先決條件就已經過濾掉了其他的元素。只查找element類型的元素。
D.CSS3 :nth-last-of-type選擇器
該選擇器的作用域nth-of-type類似，只不過nth-of-type是從前往後找，而nth-last-of-type是從後向前找，所以div:nth-last-of-type(2)的作用是找到div元素的父元素，然後再找到父元素中的所有div元素中的倒數第二個子元素。
5.根元素僞類選擇器 :root
案例：
:root{background:orange;}
:root選擇器的作用是選擇文檔根元素，即html元素，上面代碼的作用就是將整個頁面的背景設置爲橙色。
6.空元素僞類選擇器 :empty
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width:100px;height:100px; }
div:empty{background: pink;}
</style>
</head>
<body>
<h2>這是一個測試</h2>
<div >123</div>
<div class="one"></div>
<div>
<span>test test</span>
</div>
<h2>測試結束</h2>
</body>
</html>
代碼效果如下：
由上圖效果，div:empty的效果其實就是找到頁面中所有的div元素，並且div元素中沒有任何的子元素(包括文本節點也不能有)
7.非某元素的僞類選擇器
案例：
:not(div){ background:red; }
:not(div)選擇器的作用是選擇頁面中非div的其他元素，即除了div的其他元素。
8.活動錨鏈接的僞類選擇器
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2:target{
color:red;
font-size: 100px;
}
</style>
</head>
<body>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<br>
<p id="one">這是一個段落</p>
<h2 id="two">這是一個標題</h2>
<div id="three">這是一個div</div>
</body>
</html>
當我們點擊two鏈接時，代碼效果如下：
所以，h2:target的作用是當我們點擊錨鏈接進行頁面內的跳轉之後，判斷跳轉的是否是h2元素，如果是則會將h2:target設置的樣式應用到該h2元素上。
9.表單元素僞類選擇器:
這一系列的選擇器可以幫助我們選擇到特定狀態的表單元素
A.CSS3 :enabled選擇器
案例： input:enabled{
background: pink;
}
該選擇器的作用是找到已經啓用的表單元素爲其設置背景顏色
B.CSS3 :disabled
案例： input:disabled{
background: pink;
}
該選擇器的作用是找到已經禁用的表單元素爲其設置背景顏色
C.CSS3 :checked
案例： input:checked{
background: pink;
}
該選擇器的作用是找到已經選中的表單元素(比如選中的單選按鈕或者複選按鈕)爲其設置背景顏色
注意： :checked選擇器目前只兼容opera瀏覽器。
D.CSS3 ::selection
案例： ::selection{
background: pink;
}
該選擇器的作用是找到用戶在頁面中選中的內容爲其設置樣式。
總結：今天我們給大家聊了一下css3新增的這些選擇器，我們應該根據自己的需要進行使用。幫助我們更加靈活的查找選擇元式的設置。希望今天跟大家聊的選擇器能對大家有所幫助。有興趣小夥伴可以來關注一下我們長沙校區黑馬程序員，可以加微信csheima7，請加上備註CSDN。