什么是前端编程中的骨，肉，魂
這次和大家一起來聊一聊css3,在前端編程中，html，css，js分別被稱之為前端編程中的骨，肉，魂。
html搭建前端頁面的結(jié)構(gòu)，就像是人的骨骼一般，支撐整個頁面。
css控制前端頁面顯示的效果和布局，就像是人的血肉一般，使得整個頁面更加生動，靈活。
js控制前端頁面的業(yè)務(wù)邏輯，就像是人的靈魂一般，讓頁面能像一個人一樣做該做的事情。
今天，就跟大家來聊聊css3.
所謂的css3是什么呢？
其實(shí)也沒有什么神秘，就是css(Cascading Style Sheets,層疊樣式表)的第三個版本，相對于之前的css，它有了更多優(yōu)秀的，適合頁面需要的布局以及效果。可以說如果我們掌握了css3，那么我們可以更加靈活的，符合需求的來完成頁面的需求。做出更加美觀，簡潔的頁面。
css3到底需要學(xué)習(xí)一些什么樣的東西呢？
css3需要學(xué)習(xí)的是css3新增的選擇器，樣式屬性。
css3新增的選擇器讓我們可以更加靈活的選擇頁面中的元素并為其設(shè)置樣式。
css3新增的樣式屬性可以讓我們設(shè)置頁面的效果和布局，提供了更多，更加符合需要的樣式屬性。
接下來，我們會分幾次給大家一起來介紹介紹css3新增的這些內(nèi)容。
而今天我們給大家介紹的主要就是css3新增的選擇器。
1.屬性選擇器
屬性選擇器，顧名思義，是與屬性有關(guān)的選擇器，具體來說，是根據(jù)標(biāo)簽是否擁有屬性來進(jìn)行選擇的選擇器。而css3中新增的屬性選擇器是根據(jù)屬性的屬性值所在的位置進(jìn)行選擇。
A.CSS3 [attribute^=value] 選擇器 ，實(shí)例如下：
<!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標(biāo)簽中擁有class屬性，并且class屬性是以one開頭的標(biāo)簽元素被設(shè)置成了粉紅色的背景顏色，由此可知，CSS3 [attribute^=value] 選擇器的作用就是幫助我們選擇屬性是以某個屬性值開頭的標(biāo)簽元素。
B.CSS3 [attribute*=value] 選擇器， 實(shí)例如下：
<!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標(biāo)簽中擁有class屬性，并且class屬性值中有two的標(biāo)簽元素被設(shè)置成了橙色的背景顏色，由此可知，CSS3 [attribute*=value] 選擇器的作用就是幫助我們選擇屬性中包含某個屬性值的標(biāo)簽元素。
C.CSS3 [attribute*=value] 選擇器， 實(shí)例如下：
<!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標(biāo)簽中擁有class屬性，并且class屬性值以two結(jié)尾的標(biāo)簽元素被設(shè)置成了青色的背景顏色，由此可知，CSS3 [attribute$=value] 選擇器的作用就是幫助我們選擇屬性是以某個屬性值結(jié)尾的標(biāo)簽元素。
2.CSS3 element1~element2 選擇器，之后選擇器，先查找到符號左邊的元素，然后以這個元素作為起始位置查找符號右邊的元素。實(shí)例如下：
<!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的元素然后以該元素作為起始位置繼續(xù)查找div元素，并為div元素設(shè)置背景顏色粉紅色。
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>測試結(jié)束</h2> </body> </html>代碼效果如下:
由圖可見，div:first-of-type選擇器的作用是找到div元素的父元素（即body元素），查找div元素的父元素中的第一個div元素為其設(shè)置樣式。
B.CSS3 element:last-of-type 選擇器
案例：div:last-of-type
該選擇器的作用是找到div元素的父元素，查找div元素的父元素中的第一個div元素為其設(shè)置樣式.
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并不是一個確切的數(shù)字，n表示的是一個數(shù)字的范圍，那這個范圍到底是多少呢？
n是一個增量值，它的開始值是0，n的結(jié)束值是選擇元素的總數(shù)。
n也可以是數(shù)字，代表選擇數(shù)字對應(yīng)的元素。
n也可以是odd或者even，可以選擇奇偶數(shù)的元素。
n也可以是表達(dá)式，選擇符合表達(dá)式的元素。
下面給大家講解幾種偽類選擇器的時候，陸續(xù)講解n的幾種形式。
A.CSS3 element:nth-child(n)
1).n如果為數(shù)字形式，案例代碼如下：
<!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>測試結(jié)束</h2> </body> </html>代碼效果：
如上圖，div的父元素是body，body有五個子元素，第一個子元素是h2,第二個子元素是div,所以找到body的第二個子元素，而第二個子元素剛好又是div，所以設(shè)置了該div為粉紅色的背景。
2).n如果為odd，案例代碼如下：
div:nth-child(odd){ background:pink }
該選擇器的作用是找到div元素的父元素，在找到父元素的子元素，找到很多子元素啊，odd的意思就是選擇第奇數(shù)個的子元素，即第1,3,5,7,9…個元素。
而nth-child的效果也特別有意思，找到div的父元素中的所有子元素(也包含非div的子元素)中奇數(shù)的子元素并且是div的子元素，進(jìn)行樣式設(shè)置。
<!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>測試結(jié)束</h2> </body> </html>代碼效果如下:
如上圖，div的父元素是body，body有五個子元素，第一個子元素是h2,第三個子元素是div，第五個子元素是h2,所以只有第三個子元素符合奇數(shù)與div兩個條件，所以設(shè)置了粉紅色的背景。
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>測試結(jié)束</h2> </body> </html>代碼效果如下：
如上圖，div的父元素是body，body有五個子元素，第二個子元素是div,第四個子元素是div，所以第二個子元素，第四個子元素都是div元素，所以設(shè)置了粉紅色的背景。
tips:三個字母的odd是奇數(shù)，四個字母的even是偶數(shù)，英文不好的朋友們記住了。
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>測試結(jié)束</h2> </body> </html>代碼效果如下：
如上圖，div的父元素是body，body有五個子元素，所以n的取值范圍從0開始，到5為止，那么div:nth-child(n)選擇的元素是所有div的父元素的子元素，即包含H2和div的所有子元素，但是div:nth-child(n)是選擇div元素，所以div的背景顏色都被設(shè)置為了粉紅色。
特別提示：有的朋友就說了，這n從0開始，到5為止，0,1,2,3,4,5這是選擇了六個元素啊，只有5個子元素呢。大家要注意了，n值為0或者超過了元素個數(shù)的值無效。即元素是從1開始的，n為0時是無效的。
5).n如果為表達(dá)式，案例代碼如下：
<!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>測試結(jié)束</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元素，符合選擇器，就為他們設(shè)置了背景顏色粉紅色了。
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>測試結(jié)束</h2> </body> </html>代碼效果如下：
如上圖，div:nth-last-child(2)的意思就是找到div的父元素body，找到body的倒數(shù)第二個元素，而倒數(shù)第二個元素剛好就是一個div元素，就將該div元素的背景設(shè)置為了粉紅色。
小結(jié)：child這種偽類選擇器非常有意思，需要先找到我們選擇的元素的父元素，然后通過父元素找到其所有的子元素，然后就是數(shù)一下，符合個數(shù)，同時符合元素類型的元素就是我們通過child選擇器選擇的內(nèi)容了。
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>測試結(jié)束</h2> </body> </html>代碼效果如下：
如上圖，div:nth-of-type(2)的意思就是找到div的父元素body，再找到body中的所有div元素中的第二個div元素，由此可以看出 nth-child和nth-of-type 的區(qū)別。
element:nth-child(n)是找到父元素中所有的子元素,然后找到符合n條件的子元素，查看符合n條件的子元素是否是element類型的元素(因?yàn)榉蟦條件的子元素也可能是其他元素類型，不是element類型)，也就是說，nth-child需要符合兩個條件才能選擇成功，第一個是n條件，第二個是元素類型。
element:nth-of-type(n)是找到父元素中所有的子元素中的element元素，然后找到符合n條件的element元素，也就是說，nth-of-type是先找到element類型的元素，然后再找符合n條件的element類型的元素，先決條件就已經(jīng)過濾掉了其他的元素。只查找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元素中的倒數(shù)第二個子元素。
5.根元素偽類選擇器 :root
案例：
:root{background:orange;}
:root選擇器的作用是選擇文檔根元素，即html元素，上面代碼的作用就是將整個頁面的背景設(shè)置為橙色。
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>測試結(jié)束</h2> </body> </html>代碼效果如下：
由上圖效果，div:empty的效果其實(shí)就是找到頁面中所有的div元素，并且div元素中沒有任何的子元素(包括文本節(jié)點(diǎn)也不能有)
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">這是一個標(biāo)題</h2><div id="three">這是一個div</div> </body> </html>當(dāng)我們點(diǎn)擊two鏈接時，代碼效果如下：
所以，h2:target的作用是當(dāng)我們點(diǎn)擊錨鏈接進(jìn)行頁面內(nèi)的跳轉(zhuǎn)之后，判斷跳轉(zhuǎn)的是否是h2元素，如果是則會將h2:target設(shè)置的樣式應(yīng)用到該h2元素上。
9.表單元素偽類選擇器:
這一系列的選擇器可以幫助我們選擇到特定狀態(tài)的表單元素
A.CSS3 :enabled選擇器
案例： input:enabled{
? background: pink;
? }
該選擇器的作用是找到已經(jīng)啟用的表單元素為其設(shè)置背景顏色
B.CSS3 :disabled
案例： input:disabled{
? background: pink;
? }
該選擇器的作用是找到已經(jīng)禁用的表單元素為其設(shè)置背景顏色
C.CSS3 :checked
案例： input:checked{
? background: pink;
? }
該選擇器的作用是找到已經(jīng)選中的表單元素(比如選中的單選按鈕或者復(fù)選按鈕)為其設(shè)置背景顏色
注意： :checked選擇器目前只兼容opera瀏覽器。
D.CSS3 ::selection
案例： ::selection{
? background: pink;
? }
該選擇器的作用是找到用戶在頁面中選中的內(nèi)容為其設(shè)置樣式。
總結(jié)：今天我們給大家聊了一下css3新增的這些選擇器，我們應(yīng)該根據(jù)自己的需要進(jìn)行使用。幫助我們更加靈活的查找選擇元式的設(shè)置。希望今天跟大家聊的選擇器能對大家有所幫助。有興趣小伙伴可以來關(guān)注一下我們長沙校區(qū)黑馬程序員，可以加微信csheima7，請加上備注CSDN。
總結(jié)
以上是生活随笔為你收集整理的什么是前端编程中的骨，肉，魂的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
