CSS選擇器優先順序 jquery選擇器優先順序
阿新 • • 發佈:2018-12-26
css選擇器主要分為三類:標籤名選擇器、類選擇器、ID選擇器。當然後續還擴充套件了一些後代選擇器和群組選擇器。
一、 下面對著5中選擇器進行舉例:
1. 標籤名選擇器 div { color:Red;} 即頁面中的各個標籤名的css樣式
2.類選擇器 .divClass {color:Red;} 即定義的每個標籤的class 中的css樣式
3.ID選擇器 #myDiv {color:Red;} 即頁面中的標籤的id
4.後代選擇器(類選擇器的後代選擇器) .divClass span { color:Red;} 即多個選擇器以逗號的格式分隔 命名找到準確的標籤
5.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標籤分組顯示
二、 選擇器的優先順序
1.最高優先順序是 (直接在標籤中的設定樣式,假設級別為1000)<div style="color:Red;"></div>
2.次優先順序是(ID選擇器 ,假設級別為100) #myDiv{color:Red;}
3.其次優先順序是(類選擇器,假設級別為10) .divClass{color:Red;}
4.最後優先順序是 (標籤選擇器,假設級別是 1) div{color:Red;}
5.那麼後代選擇器的優先順序就可以計算了啊
比如 .divClass span { color:Red;} 優先級別就是:10+1=11
總結:對於在什麼情況下使用什麼樣的選擇器,原則有三點:一選擇可以準確的找到要控制的標籤;二使用最合理的優先順序的選擇器;三還要是html和css看起來簡潔美觀可讀性強。
通常: 1.最常用的選擇器是類選擇器
2.li td dd 等經常大量連續出現並且樣式相同或相似的情況下,一般選用類選擇器和標籤選擇器結合的後代選擇器 例:.XX li/td/dd {}
3.極少的情況下會用ID選擇器。
三、 jquery選擇器優先順序
jquery 是沒有優先級的,jquery是按照你的條件遍歷一次DOM tree,所以寫條件的時候最好儘量縮小範圍和用ID,避免要遍歷全部DOM,這樣效率是最快的
比如$('#idA'),$('div .classA'),$('.classA'),效率最好的是$('#idA'),而$('div .classA')又比$('.classA')的效率高,最後一個效率是最低的,因為jquery會遍歷整個TREE。
比如$('#idA'),$('div .classA'),$('.classA'),效率最好的是$('#idA'),而$('div .classA')又比$('.classA')的效率高,最後一個效率是最低的,因為jquery會遍歷整個TREE。