css 選擇器的分類、優先級


      首先想說的就是在博客園創建博客的目的,因為本人的技術水平現在還不怎么好,如果在這里寫自己的技術見解就感覺自己是在班門弄斧,所以剛開始自己寫的東西只是自己學習過程中的一些筆記而已,希望各位高手不要見笑啊。我的目的就是對學到的知識加強記憶、理解同時督促自己每天的學習進步。高手們就多多提提建議,同是菜鳥的就讓咱們一起奮斗吧。

  
 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選擇器。
三、選擇器的定位原則
         以前一直認為選擇的定位是從左向右的方向,查看了網上的相關資料之后才發現原來自己一直都是錯的。鄭重的聲明選擇器的定位是從右往左的方向,這樣的好處是盡早的過濾掉一些無關的樣式規則和元素。
四、簡潔、高效的css
        所謂高效就是讓瀏覽器查找更少的元素標簽來確定匹配的style元素。
      1.不要再ID選擇器前使用標簽名
        解釋:ID選擇是唯一的,加上標簽名相當於畫蛇添足了,沒必要。
      2.不要在類選擇器前使用標簽名
      解釋:如果沒有相同的名字出現就是沒必要,但是如果存在多個相同名字的類選擇器則有必要添加標簽名防止混淆如(p.colclass{color:red;} 和 span.colclass{color:red;}
      3.盡量少使用層級關系;
         #divclass p.colclass{color:red;} 改為  .colclass{color:red;}
      4.使用類選擇器代替層級關系(如上)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM