選擇器優(yōu)先級(jí)

內(nèi)聯(lián)樣式（1000）> id選擇器（100）> 類和偽類選擇器（10）?> 元素選擇器（1）>通配 * 選擇器（0）> 繼承的樣式

一、元素選擇器

作用：通過元素選擇器可以選擇頁面中的所有指定元素。

標(biāo)簽名{... }

二、id選擇器

作用：通過元素的id屬性選中唯一的一個(gè)元素。id屬性在一個(gè)頁面中是唯一的。

<p id="p_1">床前明月光</p> <p id="p_2">疑是地上霜</p> #id屬性值{... }

?三、類選擇器（class選擇器）

作用：通過元素的class屬性，選擇一組元素。class屬性在頁面中不唯一，且一個(gè)元素可以有多個(gè)class（空格隔開多個(gè)class）。

<p class="p1 class1 class2">鋤禾日當(dāng)午</p> <p class="p1 class1">汗滴禾下土</p> .class屬性值{... }

四、并集選擇器（選擇器分組）

作用：通過并集選擇器可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素。

選擇器1, 選擇器2, 選擇器3{... }

比如現(xiàn)在有三個(gè)選擇器，id選擇器：p_1{ ... } ，class選擇器：.p2{ ... }，元素選擇器：h1{ ... }，那么選擇器分組語法如下：

#p_1, .p2, h1{... }

五、交集選擇器（復(fù)合選擇器）

作用：選擇同時(shí)滿足多個(gè)選擇器的元素。

選擇器1選擇器2選擇器3 {... }

和并集選擇器區(qū)分，并集選擇器可以理解為“只要滿足其中一種即可”是一種“或”的關(guān)系；而交集選擇器是“必須滿足所有選擇器才可以”是一種“與”的關(guān)系。注意在書寫上，并集選擇器多個(gè)選擇器之間用逗號(hào)隔開，交集選擇器之間緊密相連，沒有任何分隔符。另外，因?yàn)閕d選擇器已經(jīng)可以唯一確定一個(gè)元素，因此，id選擇器不建議使用復(fù)合選擇器。

六、通配選擇器

作用：可以選擇頁面中的所有元素。

* {... }

七、后代元素選擇器

作用：選中指定元素的指定后代元素。

祖先元素 后代元素 {... }

八、子元素選擇器

作用：選中指定父元素的指定子元素。

父元素 > 子元素 {... }

九、屬性選擇器

作用：可以根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素。

<p title="text">一段文字</p> /* [屬性名] 根據(jù)屬性名選取*/ p[title]{... } /* [屬性名="屬性值"] 根據(jù)屬性值選取*/ p[title="text"]{... } /* [屬性名^="xx"] 選取以xx為開頭的屬性值*/ p[title^="te"]{... } /* [屬性名$="xx"] 選取以xx結(jié)尾的屬性值*/ p[title$="xt"]{... } /* [屬性名*="x"] 選取屬性值中有 x 的元素*/ p[title*="x"]{... }

?

總結(jié)

以上是生活随笔為你收集整理的HTMLCSS————CSS常用选择器及优先级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。