css知多少（5）——選取器

標籤：css   css知多少   選取器   

1. 引言

　　從本節開始，就進入本系列的第二個部分——css和html的結合——說白了就是選取器。

　　CSS中定義了樣式，如何將這些樣式設定到相應的html節點上？就不得不通過選取器。讓瀏覽器知道css選擇了哪一個dom節點，瀏覽器就會乖乖的把相應的樣式渲染成視圖。

　　至於css能把頁面渲染成什麼樣子，這是本系列的第三部分。

　　第一部分講css樣式的載入和層疊，第二部分講選取器以及選取器的等級，第三部分講呈現的各種樣式（背景、字型、定位、浮動等）。這樣一個思路，也正式瀏覽器使用css的流程，是最有效學習思路。（第二節中講過，此處再回顧一遍）

2. 選取器

說道css選取器，大家都知道有許多種，但是真要你去掰著手指頭數一數的話，你可能需要數幾分鐘。其實這麼多選取器，完全可以分為兩類：

1. 標籤選取器（*是特殊情況），可但標籤，也可上下文多標籤；
2. 屬性選取器（id和class都是屬性，特殊的屬性）；

2.1.    標籤選取器 2.1.1 通用選擇 *

　　通用選取器 * 大家應該都比較熟悉了，最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱們在上一節已經說過，box-sizing:border-box將在後面的盒子模型那塊再詳細描述。

　　例如，我們在檢測bootstrap3的樣式時，也可以看到它用到了 * 選取器：

　　

2.1.2 單標籤

　　單標籤選取器是最基礎的css知識了，在上一節的瀏覽器預設樣式中，到處都用了單標籤選擇。這裡不再贅述，css基礎薄弱的朋友，可以先去補補課。

2.1.3 多標籤

　　多標籤選取器一般和html上下文有關，它有以下集中分類

1. 選擇一個祖先的所有子孫節點，例如 div p{…}
2. 選擇一個父元素的所有直屬節點，例如 div > p{…}
3. 選擇某一個元素緊挨著的兄弟節點，例如 li + li{…}
4. 選擇某一個元素的所有同胞節點，例如 span ~ a{…}
5. 以上各種情況的組合應用（不要組合過於複雜，編碼講求可讀性第一）

 

　　給大家列舉一個比較典型的應用，如

　　

　　中的效果應該比較常見，在各個菜單之間加底線。我之前的實現是：每個li都加一個border-bottom，在把最後一個li的border-bottom去掉。

　　其實完全沒必要這樣麻煩，下面一個樣式設定即可解決：

　　

　　有點意思吧？

2.2.    屬性選取器 2.2.1 特殊1：id選取器

　　基礎知識，不再贅述。

　　按照許多css教程上講的，id選取器和屬性選取器是不同的兩個類別，為什麼要把id選取器放在屬性選取器下面的呢？因為css選取器是根據html節點的特性來設定的，id也是一個屬性，只是它是一個比較特殊的屬性，每個html節點的id不能重複。

　　由於特殊，而且比較常用，所以就單獨給id選取器一個“#”，本質上就是一個屬性選取器。下面兩行代碼的執行效果完全相同：

　　

2.2.2 特殊2：class選取器

　　基礎知識，不再贅述。

　　class也是一個特殊的屬性，之所以把它放在屬性選取器下，和上文將的id一樣。

2.2.3 屬性選取器

　　屬性選取器有兩種情況：

1. 只通過屬性名稱選擇：img[title]{…      }
2. 通過屬性名稱和屬性值選擇：input[type=’text’]{…}

　　這兩個也是比較基礎的，再次也就不再詳細展開了，不瞭解的朋友可以去看看基礎教程補補課。

3. 偽類和虛擬元素

　　上文提到了若干種選取器類型，偽類和虛擬元素可針對任何一種選取器使用。

3.1.    偽類

　　偽類分為UI偽類和結構化偽類。

3.1.1 UI偽類

　　UI偽類都比較簡單常用，我下面簡單寫幾句代碼，就不再詳細說了。

　　

3.1.2 結構化偽類（IE低版本不行）

　　先問大家一個問題：如何?一個表格間隔顯示背景顏色，

　　

　　最簡單的方式莫過於使用結構化偽類，一句樣式設定即可實現。

　　

 

　　結構化偽類有如下書寫選項，至於什麼意思，從字面意思即可理解：

　　

3.2.    虛擬元素

　　記住，虛擬元素是一個非常重要的概念！其中，:before和:after 非常常用。

　　首先，咱們先看看:before和:after是怎麼回事兒。

　　

　　中，我們可以看到，可以為元素前後新增內容。這裡的“內容”還可以寫成unicode編碼的方式，如：

      

　　另外，除了可以新增內容外，你還可以自訂執行內容的樣式，如：

　　

　　

　　以上大體瞭解了兩者的基本用法，下面給家介紹兩個典型的應用情境：

　　第一，大家都知道fontAwesome吧，web最流行的icon字型庫。這些小表徵圖的應用就是通過虛擬元素來實現的，如：

　　

　　（不知道fontAwesome也沒關係，我們在講到css字型時，會詳細介紹）

　　第二，清除浮動的樣式大家都知道吧？這就是一個很典型的虛擬元素應用情境：

　　

　　（在講到css浮動時，會專門講解clearfix）

4. 選取器的擴充

　　選取器本來是css的一種規則，用於為css選擇html節點的。但是聰明的人類還是通過選取器創造出了其他領域非常偉大的作品。

• jQuery

       jQuery被推廣流行的根本原因就是它的“Query”——基於css選取器的“Query”。現在的瀏覽器都支援querySelectAll()方法了，其實這就是W3C“抄襲”的jQuery的設計。

       相信各位web前端人員對jquery都比較熟悉了，這裡點一下即可。

• zen-Coding

　　jquery可以通過一段css選取器運算式從既有的html結構中選擇符合運算式的dom組，但是zen-coding反其道而行之——可以根據css選取器運算式創造出html節點。不得不佩服這幫人的創造力。

　　

　　如果你還沒用過zen-coding，無論你以後用不用，建議你也一定要去體驗一下！

5. 總結

　　本節總結了css的選取器知識，知道了選取器有若干種類型。但是類型多了不一定是個好事兒，下一節就給大家說說類型太多帶來的一個問題，以及解決方案。

-------------------------------------------------------------------------------------------------------------

歡迎關注我的教程：《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》

也歡迎關注我的開源項目——wangEditor，簡潔易用的web富文字編輯器

-------------------------------------------------------------------------------------------------------------

css知多少（5）——選取器