一、基礎(chǔ)選擇器
1、標(biāo)簽選擇器
標(biāo)簽選擇器：標(biāo)簽名是什么就直接寫什么，其他任何符號(hào)都不要書寫。
標(biāo)簽選擇器可以選中頁(yè)面上所有的同種標(biāo)簽。嵌套的再深的標(biāo)簽也能被選中。
用途：一般用于清除默認(rèn)樣式或者重置默認(rèn)樣式。
2、id選擇器
id選擇器是通過標(biāo)簽的id屬性進(jìn)行設(shè)置。
寫法：#id屬性值。（#和屬性值之間不能有空格）。
id選擇器只能選中具有該id名的標(biāo)簽或者元素。
id名的命名規(guī)則：
必須以字母開頭（嚴(yán)格區(qū)分大小寫），后面可以有數(shù)字、下劃線、短橫。
id名只能出現(xiàn)一次，即使是不同標(biāo)簽也不能使用相同的id名。
id選擇器只能選中一個(gè)標(biāo)簽或者一個(gè)html元素，因?yàn)閕d名是唯一的。
css層疊性體現(xiàn)1：同一個(gè)元素可以被不同選擇器選中設(shè)置不同的樣式屬性，這些樣式屬性都可以加載。
3、類選擇器
類選擇器是通過元素的class屬性選中具有同種類名的所有元素。
寫法：.class屬性值（.后面緊跟屬性值，不要有空格）。
class屬性值的命名規(guī)則和id是一樣的。
類選擇器的特殊應(yīng)用：原子類（公共類），我們通常會(huì)設(shè)置很多原子類，元素有什么樣式直接書寫該原子類的類名。原子類的屬性只書寫一個(gè)，便于查找。
一個(gè)元素可以有多個(gè)類名，類名之間用空格隔開。
實(shí)際工作中使用類選擇器較多，可以直接給想要的一些元素統(tǒng)一設(shè)置相同的屬性。
id上行為，class上樣式。
4、通配符
*，可以選中頁(yè)面上所有的元素，包括body。
通配符的用途：快速清除默認(rèn)樣式。
實(shí)際工作中不會(huì)使用通配符來清除默認(rèn)樣式。
例：
*{
margin: 0;
padding: 0;
}
二、高級(jí)選擇器
高級(jí)選擇器就是在基礎(chǔ)選擇器上進(jìn)行延伸。
1、后代選擇器
通過有嵌套關(guān)系的標(biāo)簽進(jìn)行選擇，通過標(biāo)簽或者類選擇器確定一個(gè)大的范圍，在大范圍再次進(jìn)行選擇，可以多次選擇。
寫法：通過空格隔開每一層。
后代選擇器不僅可以選中兒子，還可以選中孫子、曾孫子等。只要是后代都可以被選中。不管怎么選擇，都必須有對(duì)應(yīng)的html結(jié)構(gòu)。
例：
還可以把祖先補(bǔ)全書寫，可以精確每一層選擇。例：
div p span{
font-size: 36px;
}
2、交集選擇器
交集選擇器寫法：直接連續(xù)書寫選擇器，之間不要有任何空格。交集選擇器可以連續(xù)交集。
例：既是p標(biāo)簽，又有.para類和.fs類。
我是一些段落標(biāo)簽
p.para.fs{
color:yellow;
}
.box.para{} ?????//連續(xù)類名選擇器也是合法的
#box.para{} ?????//不合法，因?yàn)閕d是唯一的，可以直接被選中。
一定要區(qū)分交集選擇器和后代選擇器。
3、并集選擇器
可以同時(shí)選中多個(gè)元素，用逗號(hào)隔開每一個(gè)選擇器。
例：
p,h3,li{
color:red;
}
也可以選中類名的選擇器：.box,.ps,.fs{};
只要看到選擇器中有逗號(hào)的都是并集選擇器。
css3新增的選擇器
1、屬性選擇器
屬性選擇器：通過屬性值、屬性名進(jìn)行選中
①通過屬性值進(jìn)行選中
例：
<img src="images/0.jpg" ?alt="">
img[src="images/0.jpg"]{
border: 1px solid #000;
}
②開頭匹配：^=
例：
a[href ^="page."]{
color:red;
}
③結(jié)尾匹配$=
例：
a[href $="1.html"]{
color:red;
}
④任意匹配*=
例：
a[href *="page"]{
color: red;
}
⑤分組匹配~=
屬性值是獨(dú)立的成分（比如屬性值之間以空格隔開，那么被隔開的每一個(gè)都是獨(dú)立的）
自定義屬性：data-開頭，例：
選中的是box是一個(gè)獨(dú)立成分的元素。
例：
div[data-xixi ~="box"]{
color:red;
}
⑥短橫匹配 |=
例
div[data-xixi |="box"]{
color:red;
}
以box開頭的元素會(huì)被選中，如果還有其他元素必須以“-”連接。
⑦有屬性
例：
img[alt]{
border: 1px solid #000;
}
加深理解：
①屬性選擇器一般是以標(biāo)簽開頭，但是不寫標(biāo)簽也合法。
例：
[alt]{
border-color:red;
}
②可以連續(xù)交集
例：
img[src $= "2.jpg"][alt]{
border-color:red;
}
2、兒子序選擇器
①p:first-child：p是某個(gè)元素的第一個(gè)兒子
②p:last-child：p是某個(gè)元素的最后一個(gè)兒子。
③p:nth-child(n):p是某個(gè)元素的第n個(gè)兒子,序號(hào)是從1開始
④p:nth-child(an + b)選中連續(xù)多個(gè)，從b開始，每a個(gè)選中一次。
例：從第4行開始，每隔3行選中。4,7,10,13,16……
tr:nth-child(3n+4){
background: orange;
}
⑤奇數(shù)：nth-child(2n+1)
⑥偶數(shù)：nth-child(2n)
⑦p:nth-last-child(n)倒數(shù)第幾個(gè)兒子。
3、兒子類型序選擇器
①h3:first-of-type{}選中的h3是某個(gè)元素的第一個(gè)h3兒子
②h3:last-of-type最后一個(gè)h3兒子
③h3:nth-of-type(n)序號(hào)是從1開始
④h3:nth-of-type(2n+3)任意多個(gè)
⑤h3:nth-last-of-type(n)倒數(shù)第n個(gè)h3標(biāo)簽的兒子。
（注：紅色是答案）
4、關(guān)系節(jié)點(diǎn)選擇器
后代選擇器
①兒子選擇器：>
兒子選擇器只能選中某個(gè)元素的子代，不能選中它的孫子或者曾孫子等其他后代元素。
div.box>p{
color:red;
}
②后面第一個(gè)親兄弟 +
h3+p{
color:red;
}
③后面所有的親兄弟 ~
h3~p{
color:red;
}
