更新時間:2021-06-08 10:40:28 來源:動力節(jié)點 瀏覽2165次
css的選擇器有很多種,那么,自然而然的就會有優(yōu)先級這一概念出現(xiàn),所以,css選擇器優(yōu)先級順序是怎樣的呢?本篇文章將來給大家介紹css選擇器優(yōu)先級的排序,話不多說,我們來直接看正文內(nèi)容。
在看css選擇器優(yōu)先級順序前,我們先來簡單說說css基本選擇器有哪些?
1.標記選擇器(如:body,div,p,ul,li)
2.id選擇器(如:id="name",id="name_txt")
3.類選擇器(如:id="name",id="name_txt")
4.后代選擇器(如:#head .nav ul li 從父集到子孫集的選擇器)
5.子元素選擇器(如:div>p ,帶大于號>)
6.偽類選擇器(如:就是鏈接樣式,a元素的偽類,4種不同的狀態(tài):link、visited、active、hover。)
看完了基本的css選擇器類型后,我們接著來看一下css優(yōu)先級的概念。
當兩個規(guī)則都作用到了同一個html元素上時,如果定義的屬性有沖突,那么應(yīng)該用誰的值的,用到誰的值誰的優(yōu)先級就高。
我們來看一下css選擇器優(yōu)先級的算法:
每個規(guī)則對應(yīng)一個初始"四位數(shù)":0、0、0、0
若是 行內(nèi)選擇符,則加1、0、0、0
若是 ID選擇符,則加0、1、0、0
若是 類選擇符/偽類選擇符,則分別加0、0、1、0
若是 元素選擇符,則分別加0、0、0、1
算法:將每條規(guī)則中,選擇符對應(yīng)的數(shù)相加后得到的”四位數(shù)“,從左到右進行比較,大的優(yōu)先級越高。
看完了上述內(nèi)容,那我們就來看看css選擇器優(yōu)先級的具體排序。
css選擇器優(yōu)先級最高到最低順序為:
1.id選擇器(#myid)
2.類選擇器(.myclassname)
3.標簽選擇器(div,h1,p)
4.子選擇器(ul < li)
5.后代選擇器(li a)
6.偽類選擇(a:hover,li:nth-child)
最后,需要注意的是:
!important的優(yōu)先級是最高的,但出現(xiàn)沖突時則需比較”四位數(shù)“;
優(yōu)先級相同時,則采用就近原則,選擇最后出現(xiàn)的樣式;
繼承得來的屬性,其優(yōu)先級最低。
以上就是動力節(jié)點小編介紹的"CSS選擇器優(yōu)先級順序是什么",希望對大家有幫助,如有疑問,請在線咨詢,有專業(yè)老師隨時為您服務(wù)。