您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關css選擇器優先級順序的簡介,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
在看css選擇器優先級順序前,我們先來簡單說說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種不同的狀態:link、visited、active、hover。)
看完了基本的css選擇器類型后,我們接著來看一下css優先級的概念。
當兩個規則都作用到了同一個html元素上時,如果定義的屬性有沖突,那么應該用誰的值的,用到誰的值誰的優先級就高。
我們來看一下css選擇器優先級的算法:
每個規則對應一個初始"四位數":0、0、0、0
若是 行內選擇符,則加1、0、0、0
若是 ID選擇符,則加0、1、0、0
若是 類選擇符/偽類選擇符,則分別加0、0、1、0
若是 元素選擇符,則分別加0、0、0、1
算法:將每條規則中,選擇符對應的數相加后得到的”四位數“,從左到右進行比較,大的優先級越高。
看完了上述內容,那我們就來看看css選擇器優先級的具體排序。
css選擇器優先級最高到最低順序為:
1.id選擇器(#myid)
2.類選擇器(.myclassname)
3.標簽選擇器(div,h2,p)
4.子選擇器(ul < li)
5.后代選擇器(li a)
6.偽類選擇(a:hover,li:nth-child)
最后,需要注意的是:
!important的優先級是最高的,但出現沖突時則需比較”四位數“;
優先級相同時,則采用就近原則,選擇最后出現的樣式;
繼承得來的屬性,其優先級最低。
關于“css選擇器優先級順序的簡介”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。