何為選擇器？
選擇器{
樣式;
}
這個就是選擇器，選擇器用來指定樣式用作的對象，也就是說用于明確樣式是用來修改哪里的
- 標(biāo)簽選擇器：作用于html標(biāo)簽，如：
body{font-size:12px;line-height:1.6em;}
這個就是作用于< body>標(biāo)簽
- 類選擇器，如：
<style type="text/css">
.main{/*注意以英文.開始*/
color:red;
}
</style>
然后使用class=""為標(biāo)簽設(shè)置樣式，如：
<p class="main">類選擇器</p>
- ID選擇器，與類選擇器類似，如：
<style type="text/css">
#main{/*注意這里使用#開始*/
color:red;
}
</style>
使用：
<p id="main">ID選擇器</p>
- 子選擇器，先看代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子選擇器</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加邊框樣式（粗細(xì)為1px， 顏色為紅色的實(shí)線）*/
</style>
</head>
<body>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
上面代碼中，.foot>li{} 會對class="foot"的子標(biāo)簽< li>起作用，也就是對水果，蔬菜起作用
包含（后代）選擇器，語法格式：
.foot li{color:red;}
子選擇器使用">"連接，只作用于下一級
包含選擇器使用空格符連接，作用于所有子標(biāo)簽
在上面代碼中如果使用包含選擇器，那么不僅僅是水果，蔬菜，連同他們的子類都將發(fā)生變化。通用選擇器，語法：
*{color:red;}
通用選擇器作用范圍最大，會對所有html標(biāo)簽起作用偽類選擇符
a:hover{color:red;}
這樣的效果是鼠標(biāo)在移動到< a>標(biāo)簽上，字體顏色會變?yōu)榧t色，偽類選擇符還有很多種狀態(tài)，尤其css3中更多，不過hover是兼容最好的，使用最多的。分組選擇符
h1,span{color:red;}
相當(dāng)于下面兩行代碼
h1{color:red;}
span{color:red;}
這樣寫< h1>標(biāo)簽和< span>標(biāo)簽都將發(fā)生變化
類和ID選擇器的區(qū)別
相同點(diǎn)：可以應(yīng)用于任何元素
不同點(diǎn)：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式。我們可以為一個元素同時設(shè)多個樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的
如下 類選擇器可以這么寫：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<span class="stress bigsize">類選擇器可以同時設(shè)置兩種css，而id選擇器不可以</span>
