重拾css(6)——選擇器

前文示圖中展現了瀏覽器的渲染過程，那麼css與html是如何結合的呢？
答案是——選擇器！

1.選擇器

可分爲兩大類：

1. 標籤選擇器（*是特殊的標籤），可單標籤，也可上下文多標籤；

2. 屬性選擇器（id和class本質上也是屬性）。

1.1 標籤選擇器

1.1.1 通用選擇器 *

通用選擇器你們應該都比較熟悉了，最經常使用的就是重置瀏覽器默認樣式。

1.1.2 單標籤

文檔的標籤就是最基本的選擇器，例如：

html {color:black;}
p {color:gray;}
h2 {color:silver;}

單標籤選擇器能夠並列使用，即單標籤分組，例如：

html, p, h2 {color:black;}    //同時選中了html、p、h2三個標籤

1.1.3 多標籤

多標籤選擇器通常和html上下文有關，它有如下幾種分類：

1. 後代選擇器，選擇一個祖先的全部子孫節點，例如 div p{…}

2. 子元素選擇器，選擇一個父元素的全部直屬節點，只包含子代，不包含孫代及更後代，例如 div > p{…}

3. 相鄰兄弟選擇器，選擇某一個元素緊挨着的兄弟節點，例如 li + li{…}

4. 同代選擇器，選擇某一個元素的全部同胞節點，即有相同祖先節點的同代兄弟（不須要相鄰），例如 span ~ a{…}

5. 以上各類狀況的組合應用（不要組合過於複雜，編碼講求可讀性第一）
   典型應用：

樣式實現代碼：

ul li+li {
    border-top: 1px solid #ccc;
}

1.2 屬性選擇器

1.2.1 特殊1：id選擇器

css選擇器是根據html節點的特性來設置的，id也是一個屬性，只是它是一個比較特殊的屬性，每一個html節點的id不能重複。

　　因爲特殊，並且比較經常使用，因此就單獨給id選擇器一個「#」，本質上就是一個屬性選擇器。下面兩行代碼的執行效果徹底相同：

#div1 {border:1px solid #ccc;}
div[id='div1']{border:1px solid #ccc;}

1.2.2 特殊2：class選擇器

class也是一個特殊的屬性，之因此把它放在屬性選擇器下，和上文將的id同樣。

1.2.3 屬性選擇器

屬性選擇器有兩種狀況：

1. 只經過屬性名選擇：img[title]{…} //選中具體title屬性的img

2. 經過屬性名和屬性值選擇：input[type=’text’]{…} //選中type屬性值爲text的input

2.僞類和僞元素

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

2.1 僞類

僞類分爲UI僞類和結構化僞類。

2.1.1 UI僞類

經常使用的UI僞類實例：

a:link {color: #FF0000}        // 未訪問的連接
a:visited {color: #00FF00}    // 已訪問的連接 
a:hover {color: #FF00FF}    // 鼠標移動到連接上 
a:active {color: #0000FF}    // 選定的連接 

input[type='text']:focus {}    //得到鼠標焦點的輸入框
#title1:target {}    //突出顯示活動的 HTML 錨

2.1.2 結構化僞類（低版本IE不支持）

經常使用的結構化僞類實例：

table tr:nth-child(even) {}    //even偶數，odd奇數
table tr:nth-child(odd) {}
table tr:nth-child(n) {}    //選中第n個
table tr:first-child {}
table tr:last-child {}

2.2 僞元素

僞元素是很是重要的概念，其中較經常使用的是:before和:after
基本用法：

span:before {
                content: 'Hello ';    /*或者unicode編碼的形式*/
                color: red;    /*還能夠定義添加內容的樣式*/
            }
            span:after {
                content: ' Zhang';
            }

            <span>Jerry</span>

顯示結果：

可見:before和:after能夠用於爲元素先後添加內容。

應用場景：

第一，添加icon小圖標。例如添加fontAwesome圖標庫中的圖標

第二，清除浮動。

3.選擇器的擴展

選擇器原本是css的一種規則，用於爲css選擇html節點的。可是聰明的人類仍是經過選擇器創造出了其餘領域很是偉大的做品。

• jQuery
  jQuery被推廣流行的根本緣由就是它的「Query」——基於css選擇器的「Query」。如今的瀏覽器都支持querySelectAll()方法了，其實這就是W3C「抄襲」的jQuery的設計。

• zen-Coding
  jquery能夠經過一段css選擇器表達式從既有的html結構中選擇符合表達式的dom組，可是zen-coding反其道而行之——能夠根據css選擇器表達式創造出html節點。不得不佩服這幫人的創造力。

zen-Coding能夠大大提升編碼效率，不妨一試。