上文介紹了如何在網頁中使用css及css的常用知識點，今天首先介紹css 的選擇器，所謂選擇器就是通過一定的規則語法查找html元素節點，只有找到這些元素才能應用樣式。
選擇器類型
css 選擇器從不精確到最精確，可分以下幾種：
- 通用選擇器 （*）-—— 選擇所有元素
- 標籤選擇器（tag）—— 按 HTML 標記名稱定位元素（包括偽元素）
tag 是html 標籤關鍵字，一般小寫。
- 類選擇器（.class）—— 分別按類定位元素（包括偽類）
在html標籤上使用 class="" 屬性應用css 樣式，可以寫多個class，空格隔開，如：<p class="cls1 cls2">。
- 屬性選擇器([attr]) —— 分別按標籤屬性定位元素（包括偽類）
屬性值html標籤上的各種屬性，如 [alt], [type="text"], [lang="en"]。
- ID 選擇器 —— 按 id 定位元素
id 必需是唯一的，不能重複。
語法如下：
* {
/* 通用選擇器*/
}
tag {
/* 標籤選擇器 */
}
tag::before {
/* 標籤選擇器和偽元素 */
}
.class {
/* 類選擇器 */
}
.class:hover {
/* 類選擇器和偽類 */
}
[attr] {
/* 屬性選擇器 */
}
#id {
/* ID 選擇器 */
}偽元素有兩個冒號 ( ::, 比如 ::before)，偽類有一個冒號 ( :, 比如 :hover)。
後面學習JavaScript 時，會學習到通過js也可以查找html元素，查找規則就是通過css 選擇器查找，如下示例：
此查詢用於獲取與選擇器匹配的所有元素：
document.querySelectorAll('article h2')如上代碼獲取到一個html 節點集合，每個html節點都有子節點，孫子節點，依次類推.....
html 節點樹
在網頁中 html 是一個樹狀的結構，每個html 元素是一個節點，且每個節點下面又有子節點。
如下圖：
css 選擇器就是在這樣的一個樹結構裡面查找html元素節點，找到後瀏覽器渲染對應的樣式。
組合使用選擇器
選擇器除了可以單個使用，也可以組合使用，比如 #id p, #id >.class,p+h3等，按功能可分以下幾種：
- 包含選擇器 —— 通過空格符隔開，比如：p span，指p標籤下的所有span 標籤，包括子級的子級裡面的span。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>紅色</span></div>
<div>
<p>黑色<span>紅色</span><span>紅色</span></p>
</div>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>顯示效果：
- 子選擇器 —— 通過">" 隔開，比如： p>span, 指p元素下子級span，子級的子級下的span 就找不到了。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div > span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>紅色</span></div>
<div>
黑色<span>紅色</span><span>紅色</span>
<p><span>不是紅色</span></p>
</div>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>顯示效果：
- 相鄰選擇器 —— 通過「+」隔開，比如： p+span，指和p元素同級且緊跟在p元素節點後面的span節點。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p + span{
color:red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>紅色</span>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>顯示效果：
這裡一定注意span必須緊跟在p標籤後面，它們2個之間有任何標籤都不會起作用了。
- 兄弟選擇器 —— 通過「~」隔開，比如：p~span，指和p同級且在其後面的所有span節點。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p~span{
color: red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>紅色</span><br>
<span>紅色</span><br>
<h1>標題</h1>
<span>紅色</span>
</body>
</html>顯示效果：
- 分組選擇器 —— 通過「，」隔開，比如：h1,h2,h3,指這些元素共用相同的樣式。
如下示例：
h1,h2,h3{
background-color: red;
}整個頁面中的h1、h2、h3的背景色都是紅色，無論在哪個層次的節點中都會起作用。
選擇器優先級
不同的選擇器如果作用於同一個html元素，瀏覽器會根據優先級規則渲染樣式。
優先級高的選擇器會覆蓋優先級低的樣式，如下表從上到下優先級依次變高：
|
選擇器 |
例子 |
級別 |
|
標籤選擇器 |
h1 |
1 |
|
類，屬性選擇器 |
.class, [type="text"] |
2 |
|
ID選擇器 |
#contact |
3 |
|
內聯樣式 |
<div style="background: purple"> |
4 |
|
!important關鍵詞 |
div { color: green !important } |
覆蓋所有 |
請謹慎地使用!important，它變得非常難以維護。!important 僅在絕對必要時才應使用，例如為某些您無法控制的第三方設置樣式，使用內聯樣式，以及在少數情況下使用 JavaScript 切換顯示。
總結
css 選擇器是一種查詢html元素節點的語言，當css選擇器互相組合時，會變得很複雜，所以平時儘量減少使用組合選擇器。
關於優先級，總而言之，從標籤選擇器到!important的每層級別都比前一個級別強一個數量級。
學習css，切記死記硬背，理解它很重要，結合之前學習的html 知識多練習，感謝關注。
上篇：前端入門——css 樣式表簡介