一、基本選擇器
使用簡單且頻率高的一些選擇器歸類爲基本選擇器
1. 通用選擇器
*{
pandding: 0 px;
margin: 0 px;
border: 0 px;
}
" * "號選擇器是通用選擇器，可以匹配所有html元素的選擇器包括html標籤和body標籤
2. 元素選擇器
直接使用元素名稱作爲選擇器名
p{
color: red;
}
<p>我的顏色是紅色的嗎？</p>
3. ID選擇器
通過對元素設置全局屬性id，然後使用 #id值來選擇頁面唯一元素
#content1{
color: red;
}
<p id = "content1">我的顏色是紅色的嗎？</p>
4. 類選擇器
通過對元素設置全局屬性class，然後使用.class值選擇頁面一個或多個元素
.content1{
color: red;
}
或
p.content1{
color:red;
} //限定某種類型的元素
<p class = " content1">我的顏色是紅色的嗎？</p>
5. 屬性選擇器
//css2 直接通過兩個中括號裏面包含屬性名即可
[href] {
color:red;
}
//css2 匹配屬性值的屬性選擇器
[type="password"]{
border: 1px solid red;
}
//css3 屬性值開頭匹配的屬性選擇器
[href^= "http"]{
color:red;
}
//css3 屬性值結尾匹配的屬性選擇器
[href$= ".com"]{
color:red;
}
//css3 屬性值包含指定字符的屬性選擇器
[href*= "baidu"]{
color:red;
}
//css2 屬性值具有多個值時，匹配其中一個值的屬性選擇器
[class~= "content1"]{
font-size: 50 px;
}
//css2 屬性值具有多個值使用“-”號連接符分割的其中一個值的屬性選擇器
<i lang = "en-us">HTML</i>
[lang | = "en"]{
color:red;
}
二、複合選擇器
將不同的選擇器進行組合形成新的特定匹配，我們稱爲符合選擇器
1. 分組選擇器
將多個選擇器通過逗號分割，同時設置一組樣式，還可以使用ID選擇器、類選擇器、屬性選擇器混合使用
p,b,span{
color:red;
}
2. 後代選擇器
選擇p元素內部所有的b元素
p b{
color:red;
}
3. 子選擇器
子選擇器類似於後代選擇器，而最大的區別就是子選擇器只能選擇父級元素向下一級的元素，不可以再往下選擇
ul>li{
border:1px solid red;
}
4. 相鄰兄弟選擇器
相鄰兄弟選擇器匹配和第一個元素相鄰的第二個元素
p + b{
color:red;
}
5. 普通兄弟選擇器
普通兄弟選擇器匹配和第一個後面的所有元素
p ~ b{
color:red;
}
三、 僞元素選擇器
僞選擇器分爲僞元素選擇器和僞類選擇器，僞元素選擇器前置兩個冒號（：：），僞類選擇器前置一個冒號（：）
1. ::first-line 塊級首行
塊級元素如：p div 等的首行文本被選定。如果想限定某種元素，可以加前置 p::first-line
2. ::first-letter塊級首字母
塊級元素的首行字母
3. ::before文本前插入
在文本前插入內容
a::before{
content: "點擊-"；
}
3. ::after文本後插入
在文本後插入內容
a::after{
content: "點擊-"；
}
四、 僞類選擇器
僞類選擇器分爲四種類型：結構性僞類、UI僞類、動態僞類和其他僞類選擇器
僞類都需要加上前置選擇器來限制範圍
1. 結構性僞類選擇器
（1） 根元素選擇器
匹配文檔中的根元素（基本不使用，因爲總是返回html元素）
:root{
border:1px solid red;
}
（2） 子元素選擇器
選擇第一個子元素
ul>li:first-child{
color:red;
}
選擇最後一個子元素
ul>li:last-child{
color:red;
}
選擇只有一個子元素的那個子元素
ul>li:only-child{
color:red;
}
選擇只有一個指定類型的子元素的那個子元素
div>p:only-of-type{
color:red;
}
（3） :nth-child(n)系列
