1、認(rèn)識(shí)CSS選擇器
要使某個(gè)樣式應(yīng)用于特定的HTML元素，首先需要找到元素。在CSS中，執(zhí)行這一任務(wù)的表現(xiàn)規(guī)則稱為CSS選擇器
1、1 CSS3選擇器的優(yōu)勢(shì)
CSS3新增了屬性選擇器，偽類選擇器、過(guò)濾選擇器。可以幫助您在開發(fā)中減少對(duì)HTML的類名或ID名的依賴，以及對(duì)HTML元素的結(jié)構(gòu)依賴，使編寫代碼更加簡(jiǎn)單輕松。
1、2 CSS3選擇器分類
- 基本選擇器
- 層次選擇器
- 偽類選擇器
- 偽元素
- 屬性選擇器
偽類選擇器又分為六種：動(dòng)態(tài)偽類選擇器、目標(biāo)偽類選擇器、語(yǔ)言偽類選擇器、UI元素狀態(tài)偽類選擇器、結(jié)構(gòu)偽類選擇器、否定偽類選擇器。
2、基本選擇器
2、1基本選擇器的語(yǔ)法
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| * | 通配選擇器 | 選擇文檔中所有的HTML元素 |
| E | 元素選擇器 | 選擇指定的類型的HTML元素 |
| #id | ID選擇器 | 選擇指定ID屬性值為“id”的任意類型元素 |
| .class | 類選擇器 | 選擇指定class屬性值為“class”的任意類型的任意多元素 |
| selector1，selectorN | 群組選擇器 | 將每一個(gè)選擇器匹配的元素合并 |
實(shí)戰(zhàn)體驗(yàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本選擇器</title>
<style type="text/css">
*{margin:0; padding: 0;}
.clearfix:after,.clearfix:before{display: table;content:""}
.clearfix:after{clear: both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left; height: 20px;
line-height: 20px;width: 20px;border-radius: 10px;
text-align: center;background: #f36; color: white; margin-right: 5px;}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">2</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>```
####2、2通配選擇器
通配選擇器（*）用來(lái)選擇所有元素
```css
*{margin:0;padding:0} //此代碼在Reset的樣式文件中經(jīng)常見到，表示所有元素的margin和padding都設(shè)置為0```
代碼示例
```css
*{margin:0; padding: 0;}
.clearfix:after,.clearfix:before{display: table;content:""}
.clearfix:after{clear: both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left; height: 20px;
line-height: 20px;width: 20px;border-radius: 10px;
text-align: center;background: #f36; color: white; margin-right: 5px;}
.demo * {background:orange} //使元素類名為demo下的所有元素都將背景色設(shè)置為橙色```
####2、3 元素選擇器
元素選擇器是CSS中最基本的選擇器，接下來(lái)通過(guò)ul選擇器改變整個(gè)列表的背景色
```css
*{margin:0; padding: 0;}
.clearfix:after,.clearfix:before{display: table;content:""}
.clearfix:after{clear: both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left; height: 20px;
line-height: 20px;width: 20px;border-radius: 10px;
text-align: center;background: #f36; color: white; margin-right: 5px;}
.demo * {background:orange}
ul{background:grey}//列表ul的背景色將變成灰色```
####2、4 ID選擇器
在使用ID選擇器（#id）之前，需要在HTML文檔中給對(duì)應(yīng)的元素設(shè)置id屬性并設(shè)置其值，才能找到對(duì)應(yīng)的元素。ID選擇器具有唯一性。
```css
*{margin:0; padding: 0;}
.clearfix:after,.clearfix:before{display: table;content:""}
.clearfix:after{clear: both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left; height: 20px;
line-height: 20px;width: 20px;border-radius: 10px;
text-align: center;background: #f36; color: white; margin-right: 5px;}
.demo * {background:orange}
ul{background:grey}
#first {background:lime;color:#000}
#last {background:#000;color:lime}```
####2、5 類選擇器
類選擇器（.class）是以獨(dú)立于文檔元素的方式來(lái)指定元素樣式。于ID選擇器最大的不同之處是：**類選擇器在一個(gè)頁(yè)面中可以有多個(gè)相同的類名，而ID選擇器其ID值在整個(gè)頁(yè)面中是唯一的一個(gè)**
```css
*{margin:0; padding: 0;}
.clearfix:after,.clearfix:before{display: table;content:""}
.clearfix:after{clear: both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left; height: 20px;
line-height: 20px;width: 20px;border-radius: 10px;
text-align: center;background: #f36; color: white; margin-right: 5px;}
.demo * {background:orange}
ul{background:grey}
#first {background:lime;color:#000}
#last {background:#000;color:lime}
.item {background:green;color:#fff;font-weight:bold}//設(shè)置背景為綠色，并且加粗文字```
若在代碼后面再添加一行
```css
.item.important{background:red;}//列表3同時(shí)具有important和item類名，所以才會(huì)執(zhí)行代碼```
####2、6群組選擇器
群組選擇器（selector1,selectorN）是將具有相同樣式的元素分組在一起，每個(gè)選擇器之間用（，）隔開。