css選擇器優先順序總結！

本篇文章主要來介紹css選擇器優先權順序是怎樣的。

首先大家應該都知道什麼是css選擇器吧？

如果我們在設計網頁頁面時，使用css對HTML頁面中的元素實現一對一，一對多或多對一的控制，這就需要用到CSS選擇器。

而HTML頁面中的元素就是透過CSS選擇器來控制的。

簡單來說，選擇器可以這樣理解。

每一條css樣式定義由兩個部分組成，形式如下：

[code] 選擇器{樣式} [/code] 在{}之前的部分就是「選擇器」。

「選擇器」指明了{}中的「樣式」的作用對象，也就是「樣式」作用於網頁中的哪些元素。

那麼大家可以簡單了解下css選擇器有哪些分類？

一、標籤選擇器

body,div,p,ul,li...

二、類別選擇器

class="demo"
class="demo_1"

#三、ID選擇器

id="name",id="name_t"

四、全域選擇器

*

五、組合選擇器

.demo .demo_1
/*两选择器用空格键分开*/

六、後代選擇器

#head .nav ul li
 /* 从父集到子孙集的选择器 */

七、群組選擇器

div,span,img {color:blue}
/*即具有相同样式的标签分组显示*/

八、繼承選擇器

div p
/*两选择器用空格键分开*/

九、偽類別選擇器

link、visited、active、hover...
/* 链接样式,a元素的伪类，4种不同的状态*/

十、字串匹配的屬性選擇符

^ $ *
/*分别对应开始、结尾、包含*/

十一、子選擇器

div>p
/* 带大于号>*/

十二、CSS 相鄰兄弟選擇器

h1+p
/*  带加号+ */

了解完css分類，大家也需要簡單了解下什麼是層疊性？

層疊性：就是css處理衝突的能力。層疊性是一種能力。當多個選擇器描述了同一個屬性的時候，這個屬性到底該聽誰的？

那麼下面我們就跟大家總結了css選擇器的優先順序！

css優先權高低排序：!important >行內樣式>ID選擇器> 類別選擇器> 標籤> 通配符> 繼承> ; 瀏覽器預設屬性

這個排序的根據主要是因為每個選擇器都有自己的權重，每條css規則都包含一個權重級別，這個級別是不同的選擇器加權計算得來的。不同層次的權重會產生不同的樣式，不同的樣式會在你的網頁中表現出來。

那麼 關於css權重的詳情大家可以參考這篇文章

【css中優先順序的衡量標準是什麼？ css權重的用法介紹】

想要了解更多前端相關知識，可以關注PHP中文網CSS影片教學、Bootstrap教學等等相關教程，歡迎大家參考學習！

以上是css選擇器優先順序總結！的詳細內容。更多資訊請關注PHP中文網其他相關文章！