選擇器優先順序的權值與計算

2021-10-25 10:42:33 字數 1806 閱讀 7341

一.在html中常見選擇器有:

行內選擇器、標籤選擇器、id選擇器、類選擇器(class)

選擇器權值

標籤選擇器:權值為1

類選擇器和偽類:權值為10

id選擇器:權值為100

萬用字元選擇器:權值為0

行內樣式:權值為1000

當權值相同時,遵循就近原則。

行內選擇器:通過style將樣式直接寫在標籤裡面:

格式為:style=「屬性1:屬性值1;屬性2:屬性值2;…」

例如:啊啊啊啊

注意:最後乙個屬性值後面的分號可以省略,其他的屬性與屬性之間必須要有分號分開;現在行內選擇器也比較少用,原因是比較繁瑣,**比較少可以考慮使用,但是**一多,就很不好用了

標籤選擇器:就是利用標籤名通過內部樣式將標籤+樣式給表現出來;

格式:標籤

例如:

>

>

>

標籤選擇器title

>

type

="text/css"

>

pstyle

>

head

>

>

>

啊啊啊p

>

body

>

html

>

注意:標籤選擇器:運用範圍是:標籤的樣式是同一格式的範圍情況下,比較適用,但在同一標籤多種樣式的情況下不適合適用;

id選擇器:在標籤內定義乙個id=「idname」,在內部樣式中使用:#idname的方式使用id選擇器。

類選擇器(class):在標籤內定義乙個class=「classname」,在內部樣式中使用: .classname的方式使用id選擇器。

行內樣式:寫在標籤裡面通過style=「屬性1:屬性值1;….」的方式改變標籤樣式;例如

style

="color

:red

">

啊啊啊p

>

優先順序:

**id選擇器》標籤選擇器

行內樣式》id選擇器

類選擇器》標籤選擇器

id選擇器》類選擇器

即行內樣式(最高端)>id選擇器》類選擇器》標籤選擇器

**例子:

類選擇器與標籤選擇器的優先順序:

>

>

charset

="utf-8"

/>

>

html選擇器的優先順序title

>

type

="text/css"

>

p.blue

#red

style

>

head

>

>

>

望廬山瀑布h3

>

>

日照香爐生紫煙,p

>

class

="blue"

>

遙看瀑布掛前川。p

>

class

="blue"

id="red"

>

飛流直下三千尺,p

>

class

="blue"

id="red"

style

="color

: black;

">

疑是銀河落九天。p

>

body

>

html

>

選擇器與優先順序

css選擇器大體分為三類,即id選擇器 class選擇器 標籤選擇器。用法如下 id選擇器 id名 class選擇器 class名 標籤選擇器 標籤名 其中又可以不同方式組合 如下 後代選擇器 父代名 後代名 子代選擇器 父代名 子代名 群組選擇器 name1,name2,name div 偽類選擇...

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...

選擇器 優先順序 計算規則

css選擇器分為簡單選擇器,偽元素選擇器和組合選擇器。簡單選擇器又分為標籤選擇器,類選擇器,id選擇器,萬用字元選擇器,屬性選擇器和偽類選擇器。css中權重最高的樣式為行內樣式,就是以style 方式直接加入到html標籤內的樣式,其在css優先順序中具有最高的權重。其次是id選擇器,id選擇器由於...