CSS的四種基本選擇器和四種高階選擇器
CSS選擇器：就是指定CSS要作用的標籤，那個標籤的名稱就是選擇器。意為：選擇哪個容器。
CSS的選擇器分為兩大類：基本選擇題和擴充套件選擇器。
基本選擇器：
- 標籤選擇器：針對一類標籤
- ID選擇器：針對某一個特定的標籤使用
- 類選擇器：針對你想要的所有標籤使用
- 通用選擇器（萬用字元）：針對所有的標籤都適用（不建議使用）
下面來分別講一講。
1、標籤選擇器：選擇器的名字代表html頁面上的標籤
標籤選擇器，選擇的是頁面上所有這種型別的標籤，所以經常描述“共性”，無法描述某一個元素的“個性”。
舉例：
<style type="text/css"> p{ font-size:14px; }</style> <body> <p>css</p> </body>
再比如說，我想讓“學完了安卓，繼續學前端喲”這句話中的“前端”兩個變為紅色字型，那麼我可以用<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>學完了安卓，繼續學<span>前端</span>喲</p> </body> </html>
【總結】需要注意的是：
（1）所有的標籤，都可以是選擇器。比如ul、li、label、dt、dl、input、div等。
（2）無論這個標籤藏的多深，一定能夠被選擇上。
（3）選擇的所有，而不是一個。
2、ID選擇器：規定用#來定義（名字自定義）
針對某一個特定的標籤來使用，只能使用一次。css中的ID選擇器以”#”來定義。
舉例：
<head> <title>Document</title> <style type="text/css"> #mytitle { border:3px dashed green; } </style> </head>
然後我們在別處使用id來引用它：
<body>
<h2 id="mytitle">你好</h2>
</body>id選擇器的選擇符是“#”。
任何的HTML標籤都可以有id屬性。表示這個標籤的名字。這個標籤的名字，可以任取，但是：
- （1）只能有字母、數字、下劃線。
- （2）必須以字母開頭。
- （3）不能和標籤同名。比如id不能叫做body、img、a。
- （4）大小寫嚴格區分，也就是說aa,和AA是兩個不同的ID
另外，特別強調的是：HTML頁面，不能出現相同的id，哪怕他們不是一個型別。比如頁面上有一個id為pp的p，一個id為pp的div，是非法的！
一個標籤可以被多個css選擇器選擇：
比如，我們可以同時讓標籤選擇器和id選擇器作用於同一個標籤。（用到了層疊）如下：
然後我們通過網頁的審查元素看一下效果：
現在，假設選擇器衝突了，比如id選擇器說這個文字是紅色的，標籤選擇器說這個文字是綠色的。那麼聽誰的？
實際上，css有著非常嚴格的計算公式，能夠處理衝突.
一個標籤可以被多個css選擇器選擇，共同作用，這就是“層疊式”的第一層含義
3、類選擇器：規定用圓點.來定義
、針對你想要的所有標籤使用。優點：靈活。
css中用.來表示類。舉例如下：
<style type="text/css">
.oneclass/*定義類選擇器*/{
width:800px;
}
</style>
</head>然後我們在別處使用class來引用它：
<body>
<h2 class="oneclass">你好</h2>
</body>和id非常相似，任何的標籤都可以攜帶id屬性和class屬性。但是id屬性只能被某一特定標籤引用一次
class屬性的特點：
特性1：類選擇器可以被多種標籤使用。
特性2：同一個標籤可以使用多個類選擇器。用空格隔開。舉例如下
<h3 class="classone classtwo">我是一個h3啊</h3>而不能寫成：
<h3 class="teshu" class="zhongyao">我是一個h3啊</h3>類選擇器使用的舉例：
類選擇器的使用，能夠決定一個人的css水平。
應該注意：
（1）不要去試圖用一個類名，把某個標籤的所有樣式寫完。這個標籤要多攜帶幾個類，共同完成這個標籤的樣式。
（2）每一個類要儘可能小，有“公共”的概念，能夠讓更多的標籤使用。
如：
<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>問題：到底用id還是用class？
答案：儘可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標籤，所以css層面儘量不用id，要不然js就很彆扭。另一層面，我們會認為一個有id的元素，有動態效果。
舉例如下：
上圖所示，css和js都在用同一個id，會出現不好溝通的情況。
我們記住這句話：類上樣式，id上行為。意思是說，class屬性交給css使用，id屬性交給js使用。
上面這三種選擇器的區別：
- 標籤選擇器針對的是頁面上的一類標籤。
- ID選擇器是隻針對特定的標籤(一個)，ID是此標籤在此頁面上的唯一標識。
- 類選擇器可以被多種標籤使用。
4、萬用字元*：匹配任何標籤（引出屬性選擇器*[title（="..."）]{...}，匹配所有帶有title標籤的，a[href
（="..."）][title（="..."）]{color:red}將同時有 href（="..."）和 title（="..."）屬性的 HTML 超連結的文字設定為紅色等）
通用選擇器，將匹配任何標籤。不建議使用，IE有些版本不支援，大網站增加客戶端負擔。
效率不高，如果頁面上的標籤越多，效率越低，所以頁面上不能出現這個選擇器。
舉例：
<style type="text/css">
*/*定義通用選擇器*，希望所有標籤的上邊距和左邊距都為0*/{
margin-left:0px;
margin-top:0px;
}
</style>後面就不需要進行引用了以上就可以起到”通配“的效果了。
下面來講CSS中幾種擴充套件（高階）選擇器：
高階選擇器：
- 後代選擇器：用空格隔開
- 交集選擇器：用
.隔開 - 並集選擇器（分組選擇器）：用逗號隔開
- 偽類選擇器
1、後代選擇器: 定義的時候用空格隔開
對於E F這種格式，表示所有屬於E元素後代的F元素，有這個樣式。空格就表示後代。
後代選擇器，就是一種平衡：共性、特性的平衡。當要把某一個部分的所有的什麼，進行樣式改變，就要想到後代選擇器。
後代選擇器，描述的是祖先結構。
看定義可能有點難理解，我們來看例子吧。
舉例1：
<style type="text/css">
.div1 p{
color:red;
}
</style>空格就表示後代。.div1 p 表示.div1的後代所有的p。
這裡強調一下：這兩個標籤不一定是連續緊挨著的，只要保持一個後代的關聯即可。也就是說，選擇的是後代，不一定是兒子。
舉例：
<style type="text/css">
h3 b i{
color:red ;
}
</style上方程式碼的意思是說：定義了<h3>標籤中的<b>標籤中的<i>標籤的樣式。
同理：h3和b和i標籤不一定是連續緊挨著的，只要保持一個後代的關聯即可。
效果：
或者還有下面這種寫法：
上面的這種寫法，<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;
}
.div2{...}
.div3{...}
.div4{...}
</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元素的祖先列表：
講到這裡，我們再提一個sublime的快捷鍵。
在sublime中輸入p#haha，按tab鍵後，會生成<p id="haha"></p>。
在sublime中輸入p.haha，按tab鍵後，會生成<p class="haha"></p>。
2、交集選擇器
來看下面這張圖就明白了：
<style type="text/css">
h3.special{
color:red;
}
</style>
只能在h3標籤中使用它：
<h3 class="special">css</h3>注意，交集選擇器沒有空格。所以，沒有空格的div.red（交集選擇器）和有空格的div .red（後代選擇器）不是一個意思。
交集選擇器可以連續交：（一般不要這麼寫）
h3.special.zhongyao{
color:red;
}上面這種寫法，是 IE7 開始相容的，IE6 不相容。
交集選擇器，我們一般都是以標籤名開頭，比如div.haha 比如p.special。
3、並集選擇器：定義的時候用逗號隔開
三種基本選擇器都可以放進來。
舉例：
p,h1,#mytitle,.one/*定義了一個並集選擇器，帶有p,h1,id="mytitle",class="one"的標籤都內容會顯示紅色*/{
color:red;
}
4、偽類選擇器（待定）
對於<a>標籤，其對應幾種不同的狀態：
link：超連結點選之前visited：超連結點選之後focus：是某個標籤獲得焦點的時候（比如某個輸入框獲得焦點）hover：滑鼠放到某個標籤上的時候active：點選某個標籤沒有松鼠標時
CSS允許對於元素的不同狀態，定義不同的樣式資訊。偽類選擇器又分為兩種：
- 靜態偽類：只能用於超連結
- 動態偽類：針對所有標籤都適用
下面來分別講一下這兩種偽類選擇器。
（1）靜態偽類：
用於以下兩個狀態（只能使用於超連結）：
link：超連結點選之前visited：超連結點選之後
舉個例子：
<style type="text/css">/*偽類選擇器：靜態偽類 */
問：既然a{}定義了超連結的屬性，a:link{}定義了超連結點選之前的屬性，那這兩個有啥區別呢？
答：
a{}和a:link{}的區別：
a{}定義的樣式針對所有的超連結(包括錨點)a:link{}定義的樣式針對所有寫了href屬性的超連結(不包括錨點)
（2）動態偽類:
用於以下幾種狀態（適用於所有的標籤）：
focus（聚焦，點選某個文字框後輸入文字，可以定義文字框和文字的屬性）：是某個標籤獲得焦點的時候（比如某個輸入框獲得焦點）hover（盤旋，滑鼠停留在上面）：滑鼠放到某個標籤上的時候active（長按狀態）：點選某個標籤沒有松鼠標時
舉個例子：
<head>
<style type="text/css">
/* 偽類選擇器：動態偽類*/
input:focus/*讓input文字框獲取焦點時：邊框：#FF6F3D這種橙色；文字：綠色；背景色：#6a6a6a這種灰色*/{
border:3px solid #FF6F3D;
color:white;
background-color:#6a6a6a;
}
label:hover/*滑鼠放在label標籤上時顯示藍色*/{
color:blue;
}
label:active/*點選label標籤滑鼠沒有鬆開時顯示紅色*/{
color:red;
}
</style>
</head>
<body>
<input type="text" name=""><br><br>
<label>css大神</label>
</body>
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>效果如下：
