css基礎選擇器的學習與掌握
一.
css基礎選擇器分為：标簽選擇器，類選擇器，id選擇器，通配符選擇器（css選擇器具體分類看我css選擇器思維導圖）
二：
（1）标簽選擇器
作用：可以把某一類标簽全部選擇出來。
有點：快速為頁面中同一類型的标簽統一樣式
缺點：不能設計差異化樣式，隻能選擇全部的目前标簽
p {
color: blue;
}
（2）類選擇器
可以差異化的選擇不同的标簽，可以單獨選一個或幾個标簽
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class類選擇器</title>
<style>
/* 樣式點定義，結構類（class）調用，一個或多個，開發最常用 */
.red {
color: red;
}
.pink {
color: pink;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="red">流淚貓</li>
<li class="red">不屑貓</li>
<li class="pink">委屈貓</li>
<li class="blue">本拉豆貓</li>
</ul>
<p class="pink">暗中微笑貓</p>
</body>
</html>
（3）id選擇器
id屬性隻能在每個html裡面出現一次，用于頁面唯一性的元素上，常與JavaScript搭配使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id選擇器</title>
<style>
/* id選擇器隻能被使用唯一性的元素上，不能多次使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<p id="pink">流淚貓貓，我隻流淚，不說話</p>
</body>
</html>
（4）通配符選擇器
*代表通配符選擇器，他表示選取頁面中的所有元素（标簽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符選擇器</title>
<style>
/* 通配符選擇器會選中頁面中的所有标簽 */
* {
color: pink;
}
</style>
</head>
<body>
<div>
<span> 我</span>
<span> 是</span>
<span> 貓</span>
</div>
<p>流淚貓 </p>
</body>
</html>
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)