CSS 的四種基本選擇器
CSS 選擇器：就是指定 CSS 要作用的標簽岭粤，那個標簽的名稱就是選擇器。意為：選擇哪個容器特笋。
CSS 的選擇器分為兩大類：基本選擇器和擴展選擇器剃浇。
基本選擇器：
- 標簽選擇器：針對一類標簽
- ID 選擇器：針對某一個特定的標簽使用
- 類選擇器：針對你想要的所有標簽使用
- 通用選擇器（通配符）：針對所有的標簽都適用（不建議使用）
下面來分別講一講。
1雹有、標簽選擇器：選擇器的名字代表 html 頁面上的標簽
標簽選擇器偿渡，選擇的是頁面上所有這種類型的標簽，所以經常描述“共性”霸奕，無法描述某一個元素的“個性”溜宽。
舉例：
p{ font-size:14px; }
上方選擇器的意思是說：所有的<p>標簽里的內容都將顯示 14 號字體。
效果：
再比如說质帅，我想讓“千古壹號學完了安卓适揉，繼續(xù)學前端喲”這句話中的“前端”兩個變?yōu)榧t色字體留攒，那么我可以用<span>標簽把“前端”這兩個字圍起來，然后給<span>標簽加一個標簽選擇器嫉嘀。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<p>千古壹號學完了安卓炼邀，繼續(xù)學<span>前端</span>喲</p>
</body>
</html>
【總結】需要注意的是：
（1）所有的標簽，都可以是選擇器剪侮。比如 ul拭宁、li、label瓣俯、dt杰标、dl、input彩匕。
（2）無論這個標簽藏的多深腔剂，一定能夠被選擇上。
（3）選擇的所有驼仪，而不是一個掸犬。
2、ID 選擇器：規(guī)定用#來定義
針對某一個特定的標簽來使用绪爸，只能使用一次湾碎。css 中的 ID 選擇器以”#”來定義。
舉例：
#mytitle{ border:3px dashed green; }
效果：
id 選擇器的選擇符是“#”毡泻。
任何的 HTML 標簽都可以有 id 屬性胜茧。表示這個標簽的名字。這個標簽的名字仇味，可以任取，但是：
- （1）只能有字母雹顺、數(shù)字丹墨、下劃線。
- （2）必須以字母開頭嬉愧。
- （3）不能和標簽同名贩挣。比如 id 不能叫做 body、img没酣、a王财。
另外，特別強調的是：HTML 頁面裕便，不能出現(xiàn)相同的 id绒净，哪怕他們不是一個類型。比如頁面上有一個 id 為 pp 的 p偿衰，一個 id 為 pp 的 div挂疆，是非法的改览！
一個標簽可以被多個 css 選擇器選擇：
比如，我們可以同時讓標簽選擇器和 id 選擇器作用于同一個標簽缤言。如下：
然后我們通過網頁的審查元素看一下效果：
現(xiàn)在宝当，假設選擇器沖突了，比如 id 選擇器說這個文字是紅色的胆萧，標簽選擇器說這個文字是綠色的庆揩。那么聽誰的？
實際上跌穗，css 有著非常嚴格的計算公式订晌，能夠處理沖突.
一個標簽可以被多個 css 選擇器選擇，共同作用瞻离，這就是“層疊式”的第一層含義（第一層含義和第二層含義腾仅，放到 css 基礎的第三篇文章里講）。
3套利、類選擇器：規(guī)定用圓點.來定義
推励、針對你想要的所有標簽使用。優(yōu)點：靈活肉迫。
css 中用.來表示類验辞。舉例如下：
.one{ width:800px; }
效果：
和 id 非常相似，任何的標簽都可以攜帶 id 屬性和 class 屬性喊衫。class 屬性的特點：
特性 1：類選擇器可以被多種標簽使用跌造。
特性 2：同一個標簽可以使用多個類選擇器。用空格隔開族购。舉例如下：（正確）
<h3 class="teshu zhongyao">我是一個h3啊</h3>
初學者常見的錯誤壳贪，就是寫成了兩個 class。舉例如下：（錯誤）
<h3 class="teshu" class="zhongyao">我是一個h3啊</h3>
類選擇器使用的舉例：
類選擇器的使用寝杖，能夠決定一個人的 css 水平违施。
比如，我們現(xiàn)在要做下面這樣一個頁面：
正確的思路瑟幕，就是用所謂“公共類”的思路磕蒲，就是我們類就是提供“公共服務”，比如有綠只盹、大辣往、線，一旦攜帶這個類名殖卑，就有相應的樣式變化站削。對應 css 里的代碼如下：
<style type="text/css">
.lv {
color: green;
}
.da {
font-size: 30px;
}
.underline {
text-decoration: underline;
}
</style>
然后讓每個標簽去選取自己想要用的類選擇器：
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>
也就是說：
（1）不要去試圖用一個類名，把某個標簽的所有樣式寫完懦鼠。這個標簽要多攜帶幾個類钻哩，共同完成這個標簽的樣式屹堰。
（2）每一個類要盡可能小，有“公共”的概念街氢，能夠讓更多的標簽使用扯键。
問題：到底用 id 還是用 class？
答案：盡可能的用 class珊肃，除非極特殊的情況可以用 id荣刑。
原因：id 是 js 用的。也就是說伦乔，js 要通過 id 屬性得到標簽厉亏，所以 css 層面盡量不用 id，要不然 js 就很別扭烈和。另一層面爱只，我們會認為一個有 id 的元素，有動態(tài)效果招刹。
舉例如下：
上圖所示恬试，css 和 js 都在用同一個 id，會出現(xiàn)不好溝通的情況疯暑。
我們記住這句話：類上樣式训柴，id 上行為。意思是說妇拯，class屬性交給 css 使用幻馁，id屬性交給 js 使用。
上面這三種選擇器的區(qū)別：
- 標簽選擇器針對的是頁面上的一類標簽越锈。
- ID 選擇器是只針對特定的標簽(一個)仗嗦，ID 是此標簽在此頁面上的唯一標識。
- 類選擇器可以被多種標簽使用甘凭。
4儒将、通配符*：匹配任何標簽
通用選擇器，將匹配任何標簽对蒲。不建議使用，IE 有些版本不支持贡翘，大網站增加客戶端負擔蹈矮。
效率不高，如果頁面上的標簽越多鸣驱，效率越低泛鸟，所以頁面上不能出現(xiàn)這個選擇器。
舉例：
* {
margin-left: 0px;
margin-top: 0px;
}
效果：
CSS 的幾種高級選擇器
高級選擇器：
- 后代選擇器：用空格隔開
- 交集選擇器：選擇器之間緊密相連
- 并集選擇器（分組選擇器）：用逗號隔開
- 偽類選擇器
下面詳細講一下這幾種高級（擴展）選擇器踊东。
1北滥、后代選擇器: 定義的時候用空格隔開
對于E F這種格式刚操，表示所有屬于 E 元素后代的 F 元素，有這個樣式再芋【账空格就表示后代。
后代選擇器济赎，就是一種平衡：共性鉴逞、特性的平衡。當要把某一個部分的所有的什么司训，進行樣式改變构捡，就要想到后代選擇器。
后代選擇器壳猜，描述的是祖先結構勾徽。
看定義可能有點難理解，我們來看例子吧统扳。
舉例 1：
<style type="text/css">
.div1 p {
color: red;
}
</style>
空格就表示后代喘帚。.div1 p 表示.div1的后代所有的p。
這里強調一下：這兩個標簽不一定是連續(xù)緊挨著的闪幽，只要保持一個后代的關聯(lián)即可啥辨。也就是說，選擇的是后代盯腌，不一定是兒子溉知。
舉例：
<style type="text/css">
h3 b i {
color: red;
}
</style>
上方代碼的意思是說：定義了<h3>標簽中的<b>標簽中的<i>標簽的樣式。
同理：h3 和 b 和 i 標簽不一定是連續(xù)緊挨著的腕够，只要保持一個后代的關聯(lián)即可级乍。
效果：
或者還有下面這種寫法：
上面的這種寫法，<h3>標簽和<i>標簽并不是緊挨著的帚湘，但他們保持著一種后代關系玫荣。
還有下面這種寫法：（含類選擇器、id 選擇器都是可以的）
我們在開頭說了：后代選擇器大诸，描述的是一種祖先結構捅厂。我們舉個例子來說明這句話：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
div div p {
color: red;
}
</style>
</head>
<body>
<div>
<div class="div2">
<div class="div3">
<div class="div4">
<p>我是什么顏色？</p>
</div>
</div>
</div>
</div>
</body>
</html>
上面 css 中的div div p资柔，也能使文字的顏色變紅焙贷。通過瀏覽器的審查元素，我們可以看到 p 元素的祖先列表：
講到這里贿堰，我們再提一個 VS Code 的快捷鍵：
在 VS Code 中輸入p#haha辙芍，按 tab 鍵后，會生成<p id="haha"></p>。
在 VS Code 中輸入p.haha故硅，按 tab 鍵后庶灿，會生成<p class="haha"></p>。
2吃衅、交集選擇器：定義的時候緊密相連
定義交集選擇器的時候往踢，兩個選擇器之間緊密相連。一般是以標簽名開頭捐晶，比如div.haha菲语，再比如p.special。
如果后一個選擇器是類選擇器惑灵，則寫為div.special山上；如果后一個選擇器 id 選擇器，則寫為div#special英支。
來看下面這張圖就明白了：
h3.special {
color: red;
}
選擇的元素要求同時滿足兩個條件：必須是 h3 標簽佩憾，然后必須是 special 標簽。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>交集選擇器測試</title>
<style type="text/css">
h3.special {
color: red;
}
</style>
</head>
<body>
<h3 class="special zhongyao">標題1</h3>
<h3 class="special">我也是標題</h3>
<p>我是段落</p>
</body>
</html>
效果如下：
注意干花，交集選擇器沒有空格妄帘。所以，沒有空格的div.red（交集選擇器）和有空格的div .red（后代選擇器）不是一個意思池凄。
交集選擇器可以連續(xù)交：（一般不要這么寫）
h3.special.zhongyao {
color: red;
}
上面這種寫法抡驼，是 IE7 開始兼容的，IE6 不兼容肿仑。
3致盟、并集選擇器：定義的時候用逗號隔開
三種基本選擇器都可以放進來。
舉例：
p,h1,.title1,#one {
color: red;
}
效果：
一些 CSS3 選擇器
所有的 CSS3 選擇器尤慰，我們放在 CSS3 的內容里介紹馏锡。本文暫時先接觸一部分。
瀏覽器的兼容性問題
我們可以用
IETester這個軟件測一下 CSS 在各個版本 IE 瀏覽器上的顯示效果伟端。
IE： 微軟的瀏覽器杯道，隨著操作系統(tǒng)安裝的。所以每個 windows 都有 IE 瀏覽器责蝠。各版本如下：
- windows xp 操作系統(tǒng)安裝的 IE6
- windows vista 操作系統(tǒng)安裝的 IE7
- windows 7 操作系統(tǒng)安裝的 IE8
- windows 8 操作系統(tǒng)安裝的 IE9
- windows10 操作系統(tǒng)安裝的 edge
瀏覽器兼容問題党巾，要出，就基本上就是出在 IE6霜医、7 身上昧港，這兩個瀏覽器是非常低級的瀏覽器。
為了測試瀏覽器 CSS 3 的兼容性支子，我們可以在網上搜"css3 機器貓"關鍵字，然后在不同的瀏覽器中打開如下鏈接：
測試結果如下：
我們可以在百度統(tǒng)計里查看瀏覽器的市場占有率：
- IE9 5.94%
- IE8 21.19%
- IE7 4.79%
- IE6 4.11%
我們可以在http://html5test.com/results/desktop.html中查看
我們要知道典型的 IE6 兼容問題（面試要問）达舒，但是做項目我們兼容到 IE8 即可值朋。不解決 IE8 以下的兼容問題叹侄，目的在于：培養(yǎng)更高的興趣和眼光，別天天的跟 IE6 較勁昨登。
我們可以用「IETester」軟件看看 css 在各個瀏覽器中的顯示效果趾代。
1.子代選擇器，用符號>表示
IE7 開始兼容丰辣，IE6 不兼容撒强。
div > p {
color: red;
}
div 的兒子 p。和 div 的后代 p 的截然不同笙什。
能夠選擇：
<div>
<p>我是div的兒子</p>
</div>
不能選擇：
<div>
<ul>
<li>
<p>我是div的重孫子</p>
</li>
</ul>
</div>
2.序選擇器
IE8 開始兼容飘哨；IE6、7 都不兼容
設置無序列表<ul>中的第一個<li>為紅色：
<style type="text/css">
ul li:first-child {
color: red;
}
</style>
設置無序列表<ul>中的最后一個<li>為紅色：
ul li:last-child {
color: blue;
}
序選擇器還有更復雜的用法琐凭，以后再講芽隆。
由于瀏覽器的更新需要過程，所以現(xiàn)在如果公司還要求兼容 IE6统屈、7胚吁，那么就要自己寫類名：
<ul>
<li class="first">項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li class="last">項目</li>
</ul>
用類選擇器來選擇第一個或者最后一個：
ul li.first{ color:red; } ul li.last{ color:blue; }
3.下一個兄弟選擇器
IE7 開始兼容，IE6 不兼容愁憔。
+表示選擇下一個兄弟
<style type="text/css">
h3 + p {
color: red;
}
</style>
上方的選擇器意思是：選擇的是 h3 元素后面緊挨著的第一個兄弟腕扶。
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
效果如下：
這種選擇器作用不大。
偽類（偽類選擇器）
偽類：同一個標簽吨掌，根據其不同的種狀態(tài)半抱，有不同的樣式。這就叫做“偽類”思犁。偽類用冒號來表示代虾。
比如div是屬于box類，這一點很明確激蹲，就是屬于box類棉磨。但是a屬于什么類？不明確学辱。因為需要看用戶點擊前是什么狀態(tài)乘瓤，點擊后是什么狀態(tài)。所以策泣，就叫做“偽類”衙傀。
靜態(tài)偽類選擇器、動態(tài)偽類選擇器
偽類選擇器分為兩種萨咕。
（1）靜態(tài)偽類：只能用于超鏈接的樣式统抬。如下：
-
:link超鏈接點擊之前 -
:visited鏈接被訪問過之后
PS：以上兩種樣式，只能用于超鏈接。
（2）動態(tài)偽類：針對所有標簽都適用的樣式聪建。如下：
-
:hover“懸透婆希”：鼠標放到標簽上的時候 -
:active“激活”： 鼠標點擊標簽，但是不松手時金麸。 -
:focus是某個標簽獲得焦點時的樣式（比如某個輸入框獲得焦點）
動態(tài)偽類舉例
我們在第一段中描述過擎析，下面這三種動態(tài)偽類，針對所有標簽都適用挥下。
-
:hover“懸妥峄辏”：鼠標放到標簽上的時候 -
:active“激活”： 鼠標點擊標簽，但是不松手時棚瘟。 -
:focus是某個標簽獲得焦點時的樣式（比如某個輸入框獲得焦點）
我們不妨來舉下例子现斋。
舉例1：
<style type="text/css">
/*
偽類選擇器：動態(tài)偽類
*/
/*
讓文本框獲取焦點時：
邊框：#FF6F3D這種橙色
文字：綠色
背景色：#6a6a6a這種灰色
*/
input:focus{
border:3px solid #FF6F3D;
color:white;
background-color:#6a6a6a;
}
/*
鼠標放在標簽上時顯示藍色
*/
label:hover{
color:blue;
}
/*
點擊標簽鼠標沒有松開時顯示紅色
*/
label:active{
color:red;
}
</style>
效果：
利用這個hover屬性，我們同樣對表格做一個樣式的設置：
表格舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
/*整個表格的樣式*/
table{
width: 300px;
height: 200px;
border: 1px solid blue;
/*border-collapse屬性：對表格的線進行折疊*/
border-collapse: collapse;
}
/*鼠標懸停時解取，讓當前行顯示#868686這種灰色*/
table tr:hover{
background: #868686;
}
/*每個單元格的樣式*/
table td{
border:1px solid red;
}
</style>
</head>
<body>
<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>
</body>
</html>
效果：
