CSS選擇器、CSS hack及CSS執行效率

時間  2019-11-11
標籤 css 選擇器 hack 執行 效率 欄目 CSS 简体版
原文   原文鏈接

   主要內容：css

      1.CSS選擇器、優先級與匹配原理html

      2.CSS引入的方式有哪些? link和@import的區別是?前端

      3.CSS hackcss3

      4.如何書高效CSSweb

 1、CSS選擇器、優先級與匹配原理瀏覽器

    CSS選擇器大概能夠分爲：1.id選擇器(#myid)  2.類選擇器(.myclassname)  3.標籤選擇器(div,h1,p)  4.相鄰選擇（h1+p）6.後代選擇器（li a）7.通配符選擇器(*)  8.屬性選擇器(a[rel='externaml']) 9.僞類選擇器(a:hover)less

   選擇器安類型分能夠分爲：元素選擇器、關係選擇器、僞類選擇器、屬性選擇器、僞對象選擇器ide

   1.1  元素選擇器性能

選擇符 類型 版本 簡介
* 通配選擇符 CSS2 全部元素對象
E 類型(HTML)選擇符 CSS1 以文檔語言對象類型做爲選擇符
E#myid id選擇符 CSS1 以惟一標識符id屬性等於myid的E對象做爲選擇符
E.myclass class選擇符 CSS1 以class屬性包含myclass的E對象

       備註：E是Element的縮寫,表示元素的意思url

   1.2 關係選擇器

選擇符 類型 版本 簡介
E F 包含選擇符 CSS1 選擇全部被E元素包含的F元素
E>F 子選擇符 CSS2 選擇全部做爲E元素的全部直接子元素F，
E+F 相鄰選擇符 CSS2 選擇緊賬號在E元素以後F元素
E~F 兄弟選擇符 CSS3 選擇E元素全部兄弟元素F

  1.3 屬性選擇器

選擇符 版本 簡介 舉例
E[att]
 CSS2 選擇具備att屬性的E元素  
E[att="val"] CSS2 選擇具備att屬性值等於val的E元素  
E[att～="val"] CSS2 選擇具備att屬性且屬性值爲用空格分隔的字詞列表，其中一個等於val的E元素。  
E[att|="val"] CSS2 選擇具備att屬性且屬性值爲以val開頭並用鏈接符"-"分隔的字符串的E元素。  
E[att^="val"] CSS3 選擇具備att屬性且屬性值爲以val開頭的字符串的E元素。  
E[att$="val"] CSS3 選擇具備att屬性且屬性值爲以val結尾的字符串的E元素。  
E[att*="val"] CSS3 選擇具備att屬性且屬性值爲包含val的字符串的E元素。  

  1.4 僞類選擇器

選擇符 版本 簡介
E:link
 CSS1 設置超連接a在未被訪問前的樣式。
E:visited CSS1 設置超連接a在其連接地址已被訪問過期的樣式。
E:hover CSS1/CSS2 設置元素在其鼠標懸停時的樣式。
E:active CSS1/CSS2 設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。
E:focus CSS1/CSS2 設置元素在成爲輸入焦點（該元素的onfocus事件發生）時的樣式。
E:lang() CSS2 匹配使用特殊語言的E元素。
E:not() CSS3 匹配不含有s選擇符的元素E。
E:root CSS3 匹配E元素在文檔的根元素。
E:fist-child CSS2 匹配父元素的第一個子元素E。
E:last-child CSS3 匹配父元素的最後一個子元素E。
E:only-child CSS3 匹配父元素僅有的一個子元素E。
E:nth-child(n) CSS3 匹配父元素的第n個子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。
E:first-of-type CSS3 匹配同類型中的第一個同級兄弟元素E。
E:last-of-type CSS3 匹配同類型中的最後一個同級兄弟元素E。
E:only-of-type CSS3 匹配同類型中的惟一的一個同級兄弟元素E。
E:nth-of-type(n) CSS3 匹配同類型中的第n個同級兄弟元素E。
E:nth-last-of-type(n) CSS3 匹配同類型中的倒數第n個同級兄弟元素E。
E:empty CSS3 匹配沒有任何子元素（包括text節點）的元素E。
E:checked CSS3 匹配用戶界面上處於選中狀態的元素E。(用於input type爲radio與checkbox時)
E:enabled CSS3 匹配用戶界面上處於可用狀態的元素E。
E:disabled CSS3 匹配用戶界面上處於禁用狀態的元素E。
E:target CSS3 匹配相關URL指向的E元素。
@page:first CSS3 設置頁面容器第一頁使用的樣式。僅用於@page規則
@page:left CSS3 設置頁面容器位於裝訂線左邊的全部頁面使用的樣式。僅用於@page規則
@page:right CSS3 設置頁面容器位於裝訂線右邊的全部頁面使用的樣式。僅用於@page規則

 1.5 僞對象選擇器

選擇符 版本 簡介
E:first-letter/E::first-letter CSS1/CSS3 設置對象內的第一個字符的樣式。
E:first-line/E::first-line CSS1/CSS3 設置對象內的第一行的樣式。
E:before/E::before CSS2/CSS3 設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用
E:after/E::after CSS2/CSS3 設置在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用
E::selection CSS1/CSS3 設置對象被選擇時的顏色。

   計算指定選擇器的優先級：從新認識CSS的權重

  1. 通配選擇符的權值 0,0,0,0
  2. 標籤的權值爲 0,0,0,1
  3. 類的權值爲 0,0,1,0
  4. 屬性選擇的權值爲 0,0,1,1 0,0,1,0
  5. 僞類選擇的權值爲 0,0,1,0
  6. 僞對象選擇的權值爲 0,0,0,1
  7. ID的權值爲 0,1,0,0
  8. important的權值爲最高 1,0,0,0

      使用的規則也很簡單，就是 選擇器的權值加到一塊兒，大的優先；若是權值相同，後定義的優先 。雖然很簡單，但若是書寫的時候沒有注意，很容易就會致使CSS的重複定義，代碼冗餘。

      從上面咱們能夠得出兩個關鍵的因素：

  1. 權值的大小跟選擇器的類型和數量有關
  2. 樣式的優先級跟樣式的定義順序有關

   總結：

      比較同一級別的個數，數量多的優先級高，若是相同即比較下一級別的個數 ，至於各級別的優先級，你們應該已經很清楚了，就是：

      important > 內聯 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符 通配符 > 繼承

     這也就解釋了爲何11個標籤的定義會比不上1個類的定義，1個類加11個標籤會比不上2個類的權重高。

 

二.CSS引入的方式有哪些? link和@import的區別是?

     共有四種引入方式分別是：

        1.使用STYLE屬性，將STYLE屬性直接加在個別的元件標籤裏（如：TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%>   這種用法的優勢是可靈巧應用樣式於各標籤，可是缺點則是沒有整篇文件的【統一性】）

        2. 使用STYLE標籤  將樣式規則寫在<STYLE>...</STYLE>標籤之中。 (如：<STYLE TYPE="text/css"> <!--  body {color: #666;background: #f0f0f0;font-size: 12px;} td,p {color:#c00;font-size: 12px;} --> </STYLE> 這種用法的優勢就是在於整篇文件的統一性，只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。  )

       3. 使用 LINK標籤  將樣式規則寫在.css的樣式文件中，再以<link>標籤引入。(如： <link rel=stylesheet type="text/css" href="example.css">  這種用法的優勢就是在於能夠把要套用相一樣式規則的數篇文件都指定到同一個樣式檔案便可。缺點也是在個別文件或元件的靈活度不足。 )

      2. 使用@import引入  跟link方法很像，但必須放在<STYLE>...</STYLE> 中 <STYLE TYPE="text/css"> <!--    @import url(css/example.css); --> </STYLE>

  
三.CSS hack

   3.1  什麼是CSS hack

     因爲不一樣的瀏覽器，甚至同一瀏覽器的不一樣版本對CSS的解析認識不同，致使生成的頁面效果不一致，寫出針對不一樣瀏覽器CSS code就稱爲CSS hack。

     經常使用的CSS hack 有三種：條件Hack、屬性級Hack、選擇符級Hack

   條件Hack

      語法：

      <!--[if <keywords>? IE <version>?]> HTML代碼塊 <![endif]-->

     取值：

       <keywords>

　　 if條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本

       是否：指定是否IE或IE某個版本。關鍵字：空

       大於：選擇大於指定版本的IE版本。關鍵字： gt（greater than）
      大於或等於：選擇大於或等於指定版本的IE版本。關鍵字： gte（greater than or equal）
      小於：選擇小於指定版本的IE版本。關鍵字： lt（less than）
      小於或等於：選擇小於或等於指定版本的IE版本。關鍵字： lte（less than or equal）
      非指定版本：選擇除指定版本外的全部IE版本。關鍵字： !
     
示例： 
 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>if條件Hack_CSS參考手冊_web前端開發參考手冊系列</title>
 6 <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com" />
 7 <meta name="copyright" content="www.doyoe.com" />
 8 <style>
 9 h1{margin:10px 0;font-size:16px;}
10 span{display:none;}
11 .not-ie{display:inline;}
12 </style>
13 <!--[if IE]>
14 <style>
15 .ie{display:inline;}
16 .not-ie{display:none;}
17 </style>
18 <![endif]-->
19 
20 <!--[if IE 5]>
21 <style>
22 .ie5{display:inline;}
23 </style>
24 <![endif]-->
25 
26 <!--[if IE 6]>
27 <style>
28 .ie6{display:inline;}
29 </style>
30 <![endif]-->
31 
32 <!--[if IE 7]>
33 <style>
34 .ie7{display:inline;}
35 </style>
36 <![endif]-->
37 
38 <!--[if IE 8]>
39 <style>
40 .ie8{display:inline;}
41 </style>
42 <![endif]-->
43 
44 <!--[if IE 9]>
45 <style>
46 .ie9{display:inline;}
47 </style>
48 <![endif]-->
49 </head>
50 <body>
51 <div>
52     您正在使用
53     <span class="not-ie">非IE</span>
54     <span class="ie">IE</span>
55     <span class="ie5">5</span>
56     <span class="ie6">6</span>
57     <span class="ie7">7</span>
58     <span class="ie8">8</span>
59     <span class="ie9">9</span>
60     瀏覽器
61 </div>
62 </body>
63 </html>
64
View Code

   屬性Hack  

  

    示例：

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>屬性級Hack_CSS參考手冊_web前端開發參考手冊系列</title>
 6 <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com" />
 7 <meta name="copyright" content="www.doyoe.com" />
 8 <style>
 9 h1{margin:10px 0;font-size:16px;}
10 .test{
11     color:#c30;          /* For Firefox */
12     [;color:#ddd;];      /* For webkit(Chrome and Safari) */
13     color:#090\0;        /* For Opera */
14     color:#00f\9;        /* For IE8+ */
15     *color:#f00;         /* For IE7 */
16     _color:#ff0;         /* For IE6 */
17 }
18 </style>
19 </head>
20 <body>
21 <div class="test">在不一樣瀏覽器下看看個人顏色吧</div>
22 </body>
23 </html>
24
View Code

選擇符級Hack

 

   示例代碼：

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>選擇符級Hack_CSS參考手冊_web前端開發參考手冊系列</title>
 6 <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com" />
 7 <meta name="copyright" content="www.doyoe.com" />
 8 <style>
 9 * html .test{color:#090;}
10 * + html .test{color:#ff0;}
11 .test:lang(zh-cn){color:#f00;}
12 .test:nth-child(1){color:#0ff;}
13 </style>
14 </head>
15 <body>
16 <div class="test">在不一樣瀏覽器下看看個人顏色吧</div>
17 </body>
18 </html>
19
View Code

其中CSS3能夠這樣

  /*Mozilla內核瀏覽器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit內核瀏覽器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C標準*/
  transform: rotate | scale | skew | translate ;

 

CSS Hack 的順序

   使用 Firefox 做爲平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會不少的, IE 之外的瀏覽器幾乎都不會有問題, 因此能夠暫時忽略,順序以下：Firefox -> IE6 -> IE7 -> 其餘

4、關於CSS的執行效率

  1. 樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其餘選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者由於不匹配而退出。
  2. 若是你很是在乎頁面的性能那千萬別使用CSS3選擇器。實際上，在全部瀏覽器中，用 class 和 id 來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child selectors）對頁面性能的改善更值得關注。
  3. ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal

  4. 不要tag-qualify （永遠不要這樣作 ul#main-navigation { } ID已是惟一的，不須要Tag來標識，這樣作會讓選擇器變慢。）

  5.  

    後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）

  6. CSS3的效率問題（CSS3選擇器（好比 :nth-child）可以漂亮的定位咱們想要的元素，又能保證咱們的CSS整潔易讀。可是這些神奇的選擇器會浪費不少的瀏覽器資源。）

Google 資深web開發工程師Steve Souders對CSS選擇器的效率從高到低作了一個排序：

  1. 1.id 選擇器（#myid）2.類選擇器 （.myclassname）3.標籤選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul < li）6.後代選擇器（li a）7.通配符選擇器（*）8.屬性選擇器（a[rel="external"]）9.僞類選擇器（a:hover,li:nth-child）
  2. 上面九種選擇器中ID選擇器的效率是最高，而僞類選擇器的效率則是最低
  3. 詳細的介紹你們還能夠點擊Writing efficient CSS selectors。

  以上內容都本人從博客園和其它相關資料總結出來的，但願對家有幫忙，有寫的不對地方請你們多諒解，謝謝！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程