目錄
這幾天一直在學習CSS基礎，學習和接觸了很多的東西，首先對於CSS中的選擇器進行一個小小的總結。選擇器分爲基礎選擇器和複合選擇器兩個大類。首先是基礎選擇器：
基礎選擇器
具有兩個特徵：
- 由單個選擇器組成的
- 包括標籤選擇器、類選擇器、id選擇器和通配符選擇器
------》標籤選擇器
是指用HTML標籤名稱作爲選擇器，按標籤名稱分類，爲頁面中的某類標籤指定統一的CSS樣式。例如：對所有的<div>和所有的<span>標籤進行設置
優點：快速爲頁面中同類型的標籤統一設置樣式
------》類選擇器
如果想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用類選擇器，類選擇器在HTML中以class屬性表示，在CSS中，類選擇器以一個點"."號顯示
注意
①類選擇器使用““（英文點號）進行標識，後面緊跟類名（自定義，我們自己命名的）.
②可以理解爲給這個標籤起了一個名字，來表示
③長名稱或詞組可以使用中橫線來爲選擇器命名。
④不要使用純數字、中文等命名，儘量使用英文字母來表示
⑤命名要有意義，儘量使別人一眼就知道這個類名的目的。
⑥命名規範：見附件（Web前端開發規範手冊doc
記憶口訣：樣式點定義，結構類調用。一個或多個，開發最常用
如果一個標籤具有兩個及以上類名的樣式，那麼就可以使用多類名選擇器。
注意：
- 各個類名中間用空格隔開
- 簡單理解：就是給某個標籤添加了多個類，或者這個標籤有多個名字
- 這個標籤就可以分別具有這些類名的樣式
- 從而節省CSS代碼統修改也非常方便
- 多類名選擇器在後期佈局比較複雜的愾況下，還是較多使用的
{例如：以下具有類選擇器和標籤選擇器的使用}
注意：
類選擇器的命名是有一些規定的，命名上都有一定的規則，參考鏈接附上：
https://blog.csdn.net/xiongdaandxiaomi/article/details/96115538
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width:200px;
height:200px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
-----》id選擇器
id選擇器和類選擇器差不多，id選擇器在HTML中以id屬性表示，在CSS中，類選擇器以一個點"#"號顯示。應用上也是差不多，但是id選擇器和類選擇器有一些區別。
- 類選擇器（ class）好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用
- id選擇器好比人的身份證號碼全中國是唯的，不得重複
- id選擇器和類選擇器最大的不同在於使用次數上【前者一次，後者可多次】
- 類選擇器在修改樣式中用的最多，id選擇器般用於頁面唯一性的元素上，經常和 JavaScript配使用
-----》通配符選擇器
*代表了一切。對所有的標籤進行設置，用的比較少
複合選擇器
複合選擇器建立在基礎選擇器之上，是基本選擇器進行組合形成的。
- 複合選擇器可以更準確、更高效的選擇目標元素
- 複合選擇器由兩個或多個基礎選擇器，通過不同的方式組合而成。
- 常用複合選擇器：後代選擇器、子選擇器、並集選擇器和僞類選擇器
-----》後代選擇器
又稱爲包含選擇器，可以選擇父類元素裏面的子元素，寫法如下：
注意：
- 元素1和元素2中間用空格隔開
- 元素1是父級，元素2是子級，最終選擇的是元素2
- 元素2可以是兒子，也可以是孫子等，只要是元素1的後代即可
- 元素1和元素2可以是任意基礎選擇器
-----》子選擇器
只能選擇作爲某元素的最近一級子元素，簡單理解就是選親兒子元素。語法：元素1>元素2{樣式聲明}.【只能是直接後代】
-----》並集選擇器
並集選擇器可以選擇多組標籤同時爲他們定義相同的樣式。通常用於集體聲明井集選擇器是各選擇器通過英文逗號（，）連接而成，任何形式的選擇器都可以作爲並集選擇器的部分。
元素1，元素2{樣式聲明}
-----》僞類選擇器
----》鏈接僞類選擇器
-----》focus僞類選擇器
用於選取獲得焦點的表單元素
