什么是前端编程中的骨，肉，魂
這次和大家一起來聊一聊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。
總結
以上是生活随笔為你收集整理的什么是前端编程中的骨，肉，魂的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 6.2自旋锁
- 下一篇： Android动画了解—转场/过渡(Tr