CSS selectors 選擇器

CSS selectors 選擇器

選擇器的基本意義是：根據一些特徵，選中元素樹上的一批元素。

1. 總覽分類

   1. 簡單選擇器：針對某一特徵判斷是否選中元素。
   2. 複合選擇器：連續寫在一塊兒的簡單選擇器，針對元素自身特徵選擇單個元素。
   3. 複雜選擇器：由「（空格）」「 >」「 ~」「 +」「 ||」等符號鏈接的複合選擇器，根據父元素或者前序元素檢查單個元素。
   4. 選擇器列表：由逗號分隔的複雜選擇器，表示「或」的關係

2. 詳解

   1. 簡單選擇器

      1. 類型選擇器和全體選擇器

         1. 類型選擇器有 div span p html body a 這些，選中的是所有的DOM 上的元素。

         2. 全體選擇器就是 *，選中所有的元素。咱們一般用來覆蓋默認樣式、寫字體格式這些。

      2. id 選擇器與 class 選擇器

         1. # 選中 id
         2. . 選中 class

      這裏有個值得一提的是，document.getElementBy...的性能要比 document.querySelector...的性能好的多，儘可能用document.getElementBy

      1. 屬性選擇器

         1. [att]

            只要元素有這個屬性，不論屬性是什麼值，均可以被選中。

         2. [att=val]

            精確匹配，檢查一個元素屬性的值是不是 val。

         3. [att~=val]

            多種匹配，檢查一個元素的值是不是若干值之一，這裏的 val 不是一個單一的值了，能夠是用空格分隔的一個序列。

         4. [att|=val]

            開頭匹配，檢查一個元素的值是不是以 val 開頭，它跟精確匹配的區別是屬性只要以 val 開頭便可，後面內容無論。

            這個設計有點不符合直覺，感受^=更靠譜點，畢竟正則是這麼寫的。。。

      2. 僞類選擇器

         1. 樹結構關係僞類選擇器

            1. :empty 僞類表示沒有子節點的元素，這裏有個例外就是子節點爲空白文本節點的狀況。
            2. :nth-child 和 :nth-last-child 這是兩個函數型的僞類，CSS 的 An+B 語法設計的是比較複雜的，咱們這裏僅僅介紹基本用法。咱們仍是看幾個例子：

            3. :nth-last-child 的區別僅僅是從後往前數。

            4. :first-child :last-child 分別表示第一個和最後一個元素。

            5. :only-child 按字面意思理解便可，選中惟一一個子元素。

            6. of-type 系列，是一個變形的語法糖，S:nth-of-type(An+B) 是:nth-child(|An+B| of S) 的另外一種寫法。以此類推，還有 nth-last-of-type、first-of-type、last-of-type、only-of-type。

         2. 連接與行爲僞類選擇器（經常使用的一批）

            1. :any-link 表示任意的連接，包括 a、area 和 link 標籤均可能匹配到這個僞類
            2. :link 表示未訪問過的連接， :visited 表示已經訪問過的連接。
            3. :hover 表示鼠標懸停在上的元素。
            4. :active 表示用戶正在激活這個元素，如用戶按下按鈕，鼠標還未擡起時，這個按鈕就處於激活狀態。
            5. :focus 表示焦點落在這個元素之上。
            6. :target 用於選中瀏覽器 URL 的 hash 部分所指示的元素。
            7. 在 Selector Level 4 草案中，還引入了 target-within、focus-within 等僞類，用於表示 target 或者 focus 的父容器。具體能夠去看看 w3c selector 4

         3. 邏輯僞類選擇器

            1. :not 僞類。

               *|*:not(:hover)

         4. 其餘的僞類選擇器（瞭解便可）

            dir、lang、play、pause、current、past、future、nth-col、nth-last-col

      3. 複合選擇器

         連續寫在一塊兒 如:

         html body div span .interesting #666selector {
         	background-color: 'azure';
         }

      4. 複雜選擇器

         1. 選擇器的組合

            1. 「空格」：後代，表示選中全部符合條件的後代節點， 例如「 .a .b 」表示選中全部具備 class 爲 a 的後代節點中 class 爲 b 的節點。
            2. 「>」 ：子代，表示選中符合條件的子節點，例如「 .a>.b 」表示：選中全部「具備 class 爲 a 的子節點中，class 爲 b 的節點」。
            3. 「~」 : 後繼，表示選中全部符合條件的後繼節點，後繼節點即跟當前節點具備同一個父元素，並出如今它以後的節點，例如「 .a~.b 」表示選中全部具備 class 爲 a 的後繼中，class 爲 b 的節點。

               這麼理解更簡單，前面有.a 的 全部 .b元素

            4. 「+」：直接後繼，表示選中符合條件的直接後繼節點，直接後繼節點即 nextSlibling。例如 「.a+.b 」表示選中全部具備 class 爲 a 的下一個 class 爲 b 的節點。
            5. 「||」：列選擇器，表示選中對應列中符合條件的單元格。

            咱們在實際使用時，比較經常使用的鏈接方式是「空格」和「>」。

            工程實踐中通常會採用設置合理的 class 的方式，來避免過於複雜的選擇器結構，這樣更有利於維護和性能。空格和子代選擇器一般用於組件化場景，當組件是獨立開發時，很難徹底避免 class 重名的狀況，若是爲組件的最外層容器元素設置一個特別的 class 名，生成 CSS 規則時，則所有使用後代或者子代選擇器，這樣能夠有效避免 CSS 規則的命名污染問題。

         2. 選擇器的優先級

            1. 優先級順序

               1. 第一優先級
                  • 無鏈接符號
               2. 第二優先級
                  • 「空格」
                  • 「~」
                  • 「+」
                  • 「>」
                  • 「||」
               3. 第三優先級
                  • 「,」

            2. 優先級計算

               CSS 標準用一個三元組 (a, b, c) 來構成一個複雜選擇器的優先級。

               • id 選擇器的數目記爲 a；

               • 僞類選擇器和 class 選擇器的數目記爲 b；

               • 僞元素選擇器和標籤選擇器數目記爲 c；

               • 「*」 不影響優先級。

               • 行內屬性的優先級永遠高於 CSS 規則，瀏覽器提供了一個「口子」，就是在選擇器前加上「!import」。這個用法很是危險，由於它至關於一個新的優先級，並且此優先級會高於行內屬性

                 CSS 標準建議用一個足夠大的進制，獲取「 a-b-c 」來表示選擇器優先級。

                 specificity = base * base * a + base * b + c

                 base 是一個「足夠大」的正整數。關於 base，歷史中有些趣聞，早年 IE6 採用 256 進制，因而就產生「256 個 class 優先級等於一個 id」這樣的奇葩問題，後來擴大到 65536，基本避免了相似的問題。

               咱們這麼計算，specificity = a * 100 + b * 10 + c * 1

               同一優先級的選擇器遵循「後面覆蓋前面的原則」。

               實際寫代碼的時候仍是少來點選擇器，否則代碼可讀性會受到影響，不利於維護。（會被打死。。。）

      5. 選擇器列表

         就是一個 「，」 逗號，表示 或者 的關係。。。

3. 僞元素

   這個東西還沒說呢

   目前兼容性達到可用的僞元素有如下幾種。

   • ::first-line
   • ::first-letter
   • ::before
   • ::after
   1. 說說 first-line 與 first-letter：

   <p>This is a somewhat long HTML
   paragraph that will be broken into several
   lines. The first line will be identified
   by a fictional tag sequence. The other lines
   will be treated as ordinary lines in the
   paragraph.</p>

   p::first-line { text-transform: uppercase }

   這一段代碼把段落的第一行字母變爲大寫。注意這裏的第一行指的是排版後顯示的第一行，跟 HTML 代碼中的換行無關。

   ::first-letter 則指第一個字母。首字母變大並向左浮動是一個很是常見的排版方式。

   <p>This is a somewhat long HTML
   paragraph that will be broken into several
   lines. The first line will be identified
   by a fictional tag sequence. The other lines
   will be treated as ordinary lines in the
   paragraph.</p>

   p::first-letter { text-transform: uppercase; font-size:2em; float:left; }

   雖然聽上去很簡單，可是實際上，咱們遇到的 HTML 結構要更爲複雜，一旦元素中不是純文本，規則就變得複雜了。

   CSS 標準規定了 first-line 必須出如今最內層的塊級元素以內。所以，咱們考慮如下代碼。

   <div>
     <p id=a>First paragraph</p>
     <p>Second paragraph</p>
   </div>

   div>p#a {
       color:green;
   }
   
   div::first-line { 
       color:blue; 
   }

   這段代碼最終結果第一行是藍色，由於 p 是塊級元素，因此僞元素出如今塊級元素以內，因此內層的 color 覆蓋了外層的 color 屬性。

   若是咱們把 p 換成 span，結果就是相反的。

   <div>
     <span id=a>First paragraph</span><br/>
     <span>Second paragraph</span>
   </div>

   div>span#a {
       color:green;
   }
   
   div::first-line { 
       color:blue; 
   }

   這段代碼的最終結果是綠色，這說明僞元素在 span 以外。

   ::first-letter 的行爲又有所不一樣，它的位置在全部標籤以內，咱們把前面的代碼換成::first-letter。

   <div>
     <span id=a>First paragraph</span><br/>
     <span>Second paragraph</span>
   </div>

   div>span#a {
       color:green;
   }
   
   div::first-letter { 
       color:blue; 
   }

   執行這段代碼，咱們能夠看到，首字母變成了藍色，這說明僞元素出如今 span 以內。

   CSS 標準只要求 ::first-line 和 ::first-letter 實現有限的幾個 CSS 屬性，都是文本相關，這些屬性是下面這些。

   2. 說說 ::before 和 ::after 僞元素

      這兩個僞元素跟前面兩個不一樣的是，它不是把已有的內容套上一個元素，而是真正的無中生有，造出一個元素。

      ::before 表示在元素內容以前插入一個虛擬的元素，::after 則表示在元素內容以後插入。

      這兩個僞元素所在的 CSS 規則必須指定 content 屬性纔會生效，咱們看下例子：

      <p class="special">I'm real element</p>

      p.special::before {
          display: block;
          content: "pseudo! ";
      }

      這裏要注意一點，::before 和 ::after 還支持 content 爲 counter，如：

      <p class="special">I'm real element</p>
      p.special::before {
          display: block;
          content: counter(chapno, upper-roman) ". ";
      }

      這對於實現一些列表樣式是很是有用的。

      ::before 和 ::after 中支持全部的 CSS 屬性。實際開發中，這兩個僞元素很是有用，有了這兩個僞元素，一些修飾性元素，可使用純粹的 CSS 代碼添加進去，這可以很好地保持 HTML 代碼中的語義，既完成了顯示效果，又不會讓 DOM 中出現不少無語義的空元素。