更新時間:2021-06-08 10:40:28 來源:動力節點 瀏覽2244次
css的選擇器有很多種,那么,自然而然的就會有優先級這一概念出現,所以,css選擇器優先級順序是怎樣的呢?本篇文章將來給大家介紹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,h1,p)
4.子選擇器(ul < li)
5.后代選擇器(li a)
6.偽類選擇(a:hover,li:nth-child)
最后,需要注意的是:
!important的優先級是最高的,但出現沖突時則需比較”四位數“;
優先級相同時,則采用就近原則,選擇最后出現的樣式;
繼承得來的屬性,其優先級最低。
以上就是動力節點小編介紹的"CSS選擇器優先級順序是什么",希望對大家有幫助,如有疑問,請在線咨詢,有專業老師隨時為您服務。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習