選擇器：（單選擇器，複合選擇器）
匹配頁面中滿足條件的元素（標籤），並給他們設置樣式（用在內部/外部樣式）
單選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>樣式</title>
<style type="text/css">
/*1. 標籤選擇器*/
h1{
color: blue;
font-size:small;
}
/*2. 類選擇器*/
.cl{
color: red;
}
/*3. id選擇器*/
#i{
color: #FF69B4;
}
/*4. *通配符選擇器*/
*{
color: #00FFFF;
}
</style>
</head>
<body>
<h1 >標籤選擇器,h1默認黑體加粗,字號：xx-large</h1>
<p class="cl">類選擇器</p>
<p id="i">id選擇器</p>
<p>*通配符選擇器</p>
</body>
</html>
1. 標籤選擇器（權重1）
以標籤的名作爲選擇器名，不加任何符號
當該類標籤樣式需要重置時使用
2. 類選擇器，即class選擇器（權重10）
語法：
. 類名{ }
一個樣式重複使用時，可以考慮類選擇器
3. id選擇器（權重100）
語法：
# id名{ }
一個樣式只寫了一變，且id名不能重複
4. * 通配符選擇器（權重0）
語法：
* { }
通配符選擇器，也就是所有標籤都可以使用該裏面的樣式（需要考慮優先級，此優先級最低），所以前端開發不推薦使用，性能比較差
注：以上選擇器均考慮優先級（也就是權重大小，權重越大，優先級越高），行內樣式表權重爲1000，得合選擇器也要考慮權重的大小
複合選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>樣式</title>
<link rel="shortcut icon" type="text/x-image" href="img/tou.ico" />
<style type="text/css">
/*5. 羣組選擇器*/
h1,
.p1,
span {
color: red;
font-size: small;
}
/*6. 後代選擇器*/
.hpenson {
color: black;
}
.hpenson .sun {
color: blue;
}
/*7. 子代選擇器*/
.zperson {
color: black;
}
.sun {
color: wheat;
}
.zperson>.sun {
color: black;
font-size: x-large;
}
/*8. 兄弟選擇器*/
.gege1 {
color: blue;
}
.gege1~.didi1 {
color: red;
}
/*9. 相鄰選擇器*/
.gege1 {
color: blue;
}
.gege1+.neighbor {
color: yellow;
}
/*10. 屬性選擇器*/
input[value="屬性選擇器"] {
color: red;
}
input[type=text] {
background-color: rgb(0, 0, 0, .5);
}
/*11. 表格選擇器*/
tr:nth-child(odd) {
background-color: blue
}
tr:nth-child(even) {
background-color: red
}
</style>
</head>
<body>
<h1>羣組選擇器h1</h1>
<span class="">
羣組選擇器span
</span>
<p class="p1">羣組選擇器p1</p>
<p class="hpenson">後代選擇器祖先<span class="sun">後代選擇器後代</span></p>
<p class="zpenson">子代選擇器父<span class="sun">子代選擇器子</span></p>
<p class="gege1">兄弟選擇器1</p>
<p class="didi1">兄弟選擇器2</p>
<p class="didi1">兄弟選擇器3</p>
<p class="gege1">相鄰選擇器</p>
<p class="neighbor">相鄰選擇器</p>
<p class="neighbor">不是相鄰選擇器</p>
<input type="text" name="" id="" value="屬性選擇器" />
<table border="1" width="200px" cellpadding="0">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</body>
</html>
5. 羣組選擇器
語法：
單選擇器，單選擇器……{ }
羣組選擇器用 “，”來連接不同選擇器
6. 後代選擇器
語法：
祖先選擇器 後代選擇器{ 這裏面也是爲後代寫樣式 }
後代選擇器用 “空格”來隔開不同選擇器
7. 子代選擇器
語法：
父元素選擇器> 子選擇器{ 只設置子類之前的樣式 }
用>隔開父與子的選擇器(需要注意的是不要含空格，其他符號)
8. 兄弟選擇器
語法:
. 類名 ~ 選擇器{ }
哥哥元素~兄弟元素{ 爲所有兄弟寫樣式 }
9. 相鄰選擇器
哥哥元素+緊跟其後的一個兄弟元素{ 爲緊跟其後的一個兄弟元素寫樣式 }
10. 屬性選擇器
語法：
選擇器名稱[ 屬性名=屬性值] { }
11. 表格選擇器
語法：
元素：nth-child(等差數列){ 表格樣式 }
html中odd或2n表示偶數，even表示奇數
注：所有選擇器中：選擇器之間或與類名之間、屬性之間、id名之間除了指定符號元素外，不能出現其他字符，包括空格
學會了選擇器後可以充分利用選擇器來創建快捷鍵來生成不同的標籤，例：
table>tr*3>td*4 Tab結束
生成一個表格且是3行4列
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
P{內容$}*2 Tab鍵結束
生成2個p標籤
<p>內容1</p>
<p>內容2</p>
input[type=text,value="df"]*2 Tab鍵結束
生成2個input標籤且含有type屬性和value屬性
<input type="text,value="df"" /><input type="text,value="df"" />