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

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的選擇器知識，知道了選擇器有若干種類型。可是類型多了不必定是個好事兒，下一節就給你們說說類型太多帶來的一個問題，以及解決方案。

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

本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

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

學習做者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大衆點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》

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

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