標(biāo)簽選擇器
標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如<html>、<body>、<h1>、<p>、<img>。例如下面代碼：
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12px字號(hào)，行間距設(shè)置1.6em的樣式。
類選擇器
類選擇器在css樣式編碼中是最常用到的
語(yǔ)法：
.類選器名稱{css樣式代碼;}
注意：
1、英文圓點(diǎn)開(kāi)頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
css:
.stress{color:red;}/*類前面要加入一個(gè)英文圓點(diǎn)*/
html:
<span class="stress">context</span>
ID選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：
1、為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號(hào)（#）號(hào)，而不是英文圓點(diǎn)（.）。
3、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
css:
#setGreen{ color:green; }
html:
<span id="setGreen">公開(kāi)課</span>
子選擇器
還有一個(gè)比較有用的選擇器子選擇器，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素
css:
.food>li{border:1px solid red;}
html:
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋(píng)果</li>
<li>梨</li>
</ul>
</li>
</ul>
包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：
css:
.first span{color:red;}
html:
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋(píng)果</li>
<li>梨</li>
</ul>
</li>
</ul>
通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
偽類選擇符
更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說(shuō)我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過(guò)的狀態(tài)來(lái)設(shè)置字體顏色
css:
a:hover{color:red;}
/*hover為比較常見(jiàn)的一種偽類*/
html:
<a >膽小如鼠</a>
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過(guò)的狀態(tài)設(shè)置字體顏色變紅。這樣就會(huì)使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標(biāo)滑過(guò)字體顏色變?yōu)榧t色特效。
分組選擇符
當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符，如下代碼為右側(cè)代碼編輯器中的h1、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色
h1,span{color:red;}
它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}
