css選擇符的優先順序

2021-07-31 21:20:33 字數 1519 閱讀 9168

css 選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算? css3新增偽類有那些?

一、.css的選擇符有哪些?

1.id選擇器( # myid)

2.類選擇器(.myclassname)

3.標籤選擇器(div, h1, p)

4.相鄰選擇器(h1

+ p)

5.子選擇器(ul

> li)

6.後代選擇器(li a)

7.萬用字元選擇器(

* )8.屬性選擇器(a[rel

="external"

])9.偽類選擇器(a: hover, li:nth-child)

二、優先順序

!important,使用此標記的css屬性總是最優先的。

!important->id->class->tag

important 比 內聯優先順序高,但內聯比 id 要高;如果兩個規則的特殊性相同,那麼後定義的會覆蓋先定義的;

當乙個樣式同時既有

情況一:1.多重樣式優先順序

多重樣式(multiple styles):如果外部樣式、內部樣式和內聯樣式同時應用於同乙個元素,就是使多重樣式的情況。

一般情況下,優先順序如下:

(外部樣式)external style sheet <(內部樣式)internal style sheet <(內聯樣式)inline style

注意:有個例外的情況,就是如果外部樣式放在內部樣式的後面,則外部樣式將覆蓋內部樣式。

情況二:

2.css樣式優先順序演算法如何計算?

內聯樣式表的權值最高 1000;

id 選擇器的權值為 100

class 類選擇器的權值為 10

html 標籤選擇器的權值為 1

1.css優先順序

是由四個級別和各個級別出現的次數決定的,值從左到右,左面的最大,一級大於一級

2.優先順序演算法

每個規則對應乙個初始四位數:0,0,0,0

若是行內樣式優先順序,則是1,0,0,0,高於外部定義

sjweb

若是id選擇符,則分別加0,1,0,0

若是類選擇符,偽類選擇符,屬性選擇符,則分別加0,0,1,0

若是元素選擇器,偽元素選擇器,則分別加0,0,0,1

3.需要注意

!important的優先順序是最高的,但出現衝突時則需比較」四位數「

優先順序相同時,則採用就近原則

繼承得來的屬性,其優先順序最低

4.例項

body div p--specificity值為0,0,0,3

div #sjweb --specificity值為 0,1,0,1

html > body div [id=」totals」] ul li>p --specificity值為 0,0,1,6

CSS選擇符優先順序

1 如果一條宣告來自style屬性,也就是內聯樣式,那麼它具有最高的優先順序。如果不是,則轉入第二步。2 計算id選擇符的數目。數目最大的宣告具有最高的優先順序。如果兩個或多個宣告具有相同的id選擇符的數目 包括0 則轉入第三步。3 計算類選擇符 屬性選擇符和偽類選擇符的數目。總數最大的宣告具有最高...

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...