1. 程式人生 > >CSS選擇器優先順序 jquery選擇器優先順序

CSS選擇器優先順序 jquery選擇器優先順序

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。