常見CSS選擇器
1 基本選擇器
-
通配選擇器 以*****定義
*{} 選擇文檔中所有的html元素 -
id選擇器 以#定義
#div{} 選擇指定ID屬性值為"id"的html元素 -
類選擇器
.c1{} 選擇指定class屬性值為"class"的任意多個(gè)html元素 -
元素選擇器
ul{} 選擇指定類型的的html元素
2組合選擇器
-
多元素選擇器 用逗號(hào)分隔
E,F{} 同時(shí)匹配E元素，F(xiàn)元素 -
后代選擇器 用空格分隔
E F{} 匹配E元素所有的后代F元素 -
子元素選擇器 用>分隔
E>F{} 匹配E元素的所有直接子元素F -
直接相鄰選擇器 用+分隔
E+F{} 匹配E元素后的相鄰的同級(jí)元素F -
普通相鄰選擇器 用~分隔
E~F{} 匹配E元素后的所有同級(jí)元素F，無(wú)論相鄰與否
3 偽類選擇器
-
結(jié)構(gòu)偽類選擇器
E:first-child 匹配E元素的第一個(gè)子元素
E:last-child 匹配E元素的最后一個(gè)子元素
E:nth-child(n) 匹配E元素的第n個(gè)子元素
E:nth-last-child(n) 匹配E元素的倒數(shù)第n個(gè)子元素
E:nth-of-type(n) 匹配父元素內(nèi)具有指定類型的第n個(gè)E元素
E:nth-last-of-type(n) 匹配父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素
E:first-of-type 匹配父元素內(nèi)具有指定類型的第一個(gè)E元素
E:last-of-type 匹配父元素內(nèi)具有指定類型的最后一個(gè)E元素
E:only-child 匹配父元素內(nèi)只包含一個(gè)子元素，且該子元素匹配E元素
E:only--ofchild 匹配父元素內(nèi)只包含一個(gè)同類型的子元素耻涛，且該子元素匹配E元素
E:empty 匹配沒有子元素的元素
E:root 匹配E元素所在文檔的根元素
動(dòng)態(tài)偽類選擇器
E:link 匹配未被訪問過的超鏈接
E:focus 匹配獲得焦點(diǎn)的E元素
E:hover 匹配鼠標(biāo)停留其上的E元素
E:active 匹配鼠標(biāo)已經(jīng)其上按下甸鸟、還沒有釋放的E元素
E:visited 匹配被訪問過的超鏈接
E:checked 匹配被勾選中的radio或checkbox語(yǔ)言偽類選擇器
E:lang( ) 匹配指定了lang屬性且值為( )的E元素
選擇器的優(yōu)先級(jí)
從高到低排序：
1 在屬性后面使用 !important
2 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3 id選擇器
4 類選擇器
5 偽類選擇器
6 屬性選擇器
7 標(biāo)簽選擇器
8 通配符選擇器
9 瀏覽器自定義選擇器
class 和 id 的使用場(chǎng)景
id具有唯一性夹界，所以用在頁(yè)面上只出現(xiàn)一次的地方
class具有普遍性洒闸，所以用在頁(yè)面上多次出現(xiàn)的地方
使用CSS選擇器要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g
- 使代碼語(yǔ)義化，提高可讀性
- 規(guī)范代碼羹应，便于多人協(xié)作
- 提高兼容性，瀏覽器可能會(huì)因?yàn)椴贿m當(dāng)?shù)拿鲥e(cuò)
選擇器的使用實(shí)例
#header{} id=header的元素
.header{} class=header的元素
.header .logo{} 父元素header里的子元素logo
.header.mobile{} header元素和mobile元素
.header p, .header h3{} 父元素header里的子元素p和父元素header里的子元素h3
#header .nav>li{} id=header的父元素里的class=nav的子元素的后代li元素
#header a:hover{} id=header的父元素里的class=a的子元素的偽類
偽類選擇器
E:first-child
E:last-child
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-child
E:only--ofchild
E:empty
E:root
E:link
E:visited
E:active
E:hover
E:focus
E:lang
:first-child和:first-of-type的作用和區(qū)別
:first-child：父元素內(nèi)的第一個(gè)子元素（年級(jí)第一）
:first-of-type：父元素內(nèi)具有指定類型的第一個(gè)子元素（班級(jí)第一）
<div class="footer">
<p>第一個(gè)子元素</p>
<h3>第二個(gè)子元素</h3>
<h1>第三個(gè)子元素</h1>
<h1>第四個(gè)子元素</h1>
</div>
p:first-child匹配到第一個(gè)元素 h3:first-child h1:first-child匹配不到任何元素次屠，因?yàn)橹挥衟是第一個(gè)园匹，其他都是無(wú)效的
h1:first-of-type匹配到第三個(gè)子元素，因?yàn)樗堑谝粋€(gè)h1元素
代碼實(shí)例
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item1:first-child匹配到item1的第一個(gè)元素拍劫灶，所以aa是紅色
.item1:first-of-type匹配到item每類的第一個(gè)元素即p和第一個(gè)h3裸违，所以aa和bb背景色是藍(lán)
text-align: center
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。
text-align: center作用在塊級(jí)元素上本昏，使塊級(jí)元素內(nèi)的行內(nèi)元素水平居中供汛。
