CSS選擇器
使用CSS選擇器可以指定將CSS樣式應用到哪一個HTML元素，利用CSS中不同的選擇器可以準確的選擇需要的元素。
標簽選擇器
標簽選擇器通常是HTML標簽。
ID選擇器
ID選擇器像是給元素起了一個唯一的“名字”， ``#id名` 來獲取對應的元素，并為其 設置CSS樣式。
類選擇器
類選擇器和ID選擇器的唯一區(qū)別是:一個元素可以使用多個類選擇器，但是只能使用一個ID選擇器 我們可以通過.類名來使用類選擇器。
一個元素可以同時使用多個類選擇器，每個類選擇器之間使用空格隔開，在demo1和demo2中都設置了背景顏色，但是background-color: #99CC66;會被background-color: #FFCC99;所覆蓋，background-color: #99CC66;不會被應用在元素上。
在同一元素上使用多個類選擇器，如果一個屬性被聲明多次，最終會生效的是距離被作用元素最近的那一個。
通配符選擇器 *
使用通配符選擇器*選擇了所有的元素(h1、h2)并設置元素內(nèi)文本顏色為#CC3333。
群組選擇器
連接符: ,
CSS群組選擇器，也稱為多元素選擇器，是用于同時選取多個元素的CSS選擇器，它可以讓你在一個CSS規(guī)則中一次選擇多個元素，而不需要為每個元素編寫單獨的CSS規(guī)則。
下面先演示一個不使用群組選擇器的示例:
需要給h1、h2、h3中的文本設置#CC3333顏色，給div設置背景顏色#CCCC99?在不使用群組選擇器的情況下，代碼出現(xiàn)了冗余，當需要設置CSS樣式的元素多了之后就會變層一場災難。
下面是使用群組選擇器的示例:
可以很明顯的看出，不使用群組選擇器和使用群組選擇器時兩者之間代碼量的差距。
子代選擇器
連接符: >
示例中使用子代選擇器選擇了div下的所有子代h1并設置字體顏色，可以在瀏覽器中的效果可以看到，Hello的顏色變?yōu)榱?code>blue而World的顏色并沒有發(fā)生改變，這是因為子代選擇器只能選擇到直接子元素，World并不是div的直接子元素，World是section元素的直接子元素是div的間接子元素。
后代選擇器
連接符: 空格
繼續(xù)拿子代選擇器中的例子來說，后代選擇器是把子代選擇器中的?>?換成了空格，就變成了div h1{}這時Hello?和World的顏色都會變成?blue，因為不論是直接子代還是間接子代都算是后代。
通用兄弟選擇器
連接符: ~
通用兄弟選擇器是?CSS 選擇器中用于選擇與某個元素有相同父元素，并在該元素后面的所有兄弟元素。
比如說我們想要選擇ul中某個li后面的所有l(wèi)i可以像下面這樣使用通用兄弟選擇器來實現(xiàn)。
我們使用通用兄弟選擇器選中了.demo后面的所有l(wèi)i并未其字體設置了顏色，所以在瀏覽器中可以看到“來到”和“晴空的code”的顏色發(fā)生了變化而“通用兄弟選擇器”和“歡迎”`的顏色并沒有改變，因為并沒有選中它們。
相鄰兄弟選擇器
連接符： +
剛才介紹了通用兄弟選擇器，現(xiàn)在讓我們來學習相鄰兄弟選擇器。
相鄰兄弟選擇器只會選擇緊接在該元素后面的元素，而通用兄弟選擇器會選擇所有在該元素后面的兄弟元素，繼續(xù)用通用兄弟選擇器的示例。
和通用兄弟選擇器的效果對比一下可以發(fā)現(xiàn)只有“來到”的顏色發(fā)生了改變，這正好是應證了了相鄰兄弟選擇器和通用兄弟選擇器的不同之處:相鄰兄弟選擇器只會選擇緊接在該元素后面的元素，而通用兄弟選擇器會選擇所有在該元素后面的兄弟元素。
偽類選擇器
偽類可以分為兩種:結(jié)構(gòu)化偽類、UI偽類。
UI偽類
應用UI偽類最常見的地方非超鏈接(a)莫屬，我們可以為超鏈接添加偽類，當用戶鼠標懸停，或點擊等情況時表現(xiàn)出一定的狀態(tài)。
針對超鏈接的偽類有四種:link、visited、hover、active
link:未訪問的超鏈接，可以設置顏色、字體。
visited:已訪問的超鏈接，可以設置顏色。
hover:鼠標移入時的狀態(tài)。
active：鼠標點擊(點擊沒有釋放)時的狀態(tài)。
可以通過a:偽類的方式對a標簽使用偽類。
在使用超鏈接偽類時，四者的順序一定是:link、visited、hover、active?如果順序錯誤，就會造成想要使用的偽類不起作用。
:focus偽類
當表單聚焦時添加狀態(tài)。
#結(jié)構(gòu)化偽類選擇器
:first-child：選擇元素第一個子元素;last-child：選擇元素的最后一個子元素;:nth-child(n)：選擇元素的第n個子元素;:nth-last-child(n)：選擇元素的倒數(shù)第n個子元素;:only-child：選擇只有一個子元素的元素;:not(): 選擇不匹配指定選擇器的元素;
如果要求將ul的第一個li加一個背景色很多人會寫下與上面相似的代碼(我第一次就用錯了)，上面的代碼理解起來好像是對的，但實際上這個會選擇所有的li元素，正確的代碼應該是下方這樣的。
我們需要選擇的是ul下的li，而ul li:first-child就像是先把ul下的li全部選擇出來，然后再對選擇出來的li使用:first-chil進行篩選——選出第一個li。
下面將繼續(xù)演示其余偽類選擇器的使用：
下面單獨演示:only-child和:not()偽類選擇器:
盡管我們知道了:only-child的作用，但是剛開始使用還是容易犯下一些錯誤，上述代碼的作用就是選擇ul中的li，但是還有一個限制:ul li span:only-child中的span:only-child的意思是li元素中只有一個span元素，所以有背景顏色的會是一，而不是二。
:not()偽類選擇器:
上述代碼會給除了第一個li之外的li加上背景色，因為not(:first-child)選擇的是不匹配:first-child的元素，而二和三不匹配:first-child。
