選擇器優先級

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

一、元素選擇器

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

標簽名{... }

二、id選擇器

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

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

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

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

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

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

作用：通過并集選擇器可以同時選中多個選擇器對應的元素。

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

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

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

五、交集選擇器（復合選擇器）

作用：選擇同時滿足多個選擇器的元素。

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

和并集選擇器區分，并集選擇器可以理解為“只要滿足其中一種即可”是一種“或”的關系；而交集選擇器是“必須滿足所有選擇器才可以”是一種“與”的關系。注意在書寫上，并集選擇器多個選擇器之間用逗號隔開，交集選擇器之間緊密相連，沒有任何分隔符。另外，因為id選擇器已經可以唯一確定一個元素，因此，id選擇器不建議使用復合選擇器。

六、通配選擇器

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

* {... }

七、后代元素選擇器

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

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

八、子元素選擇器

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

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

九、屬性選擇器

作用：可以根據元素中的屬性或屬性值來選取指定元素。

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。