16.1　選擇器概述

選擇器是CSS 3中一個重要的內(nèi)容。使用它可以大幅度提高開發(fā)人員書寫或修改樣式表時的工作效率。

在樣式表中，一般會書寫大量的代碼，在大型網(wǎng)站中，樣式表中的代碼可能會達(dá)到幾千行。麻煩的是，當(dāng)整個網(wǎng)站或整個Web應(yīng)用程序全部書寫好之后，需要針對樣式表進(jìn)行修改時，在洋洋灑灑一大篇CSS代碼之中，并沒有說明什么樣式服務(wù)于什么元素，只是使用了class屬性，然后在頁面中指定了元素的class屬性。但是，使用元素的class屬性有兩個缺點：第一，class屬性本身沒有語義，它純粹用來為CSS樣式服務(wù)，屬于多余屬性；第二，使用class屬性的話，并沒有把樣式與元素綁定起來，針對同一個class屬性，文本框也可以使用，下拉框也可以使用，甚至按鈕也可以使用，這樣其實是非常混亂的，修改樣式時也很不方便。

所以，在CSS 3中，提倡使用選擇器來將樣式與元素直接綁定起來，這樣的話，在樣式表中什么樣式與什么元素相匹配變得一目了然，修改起來也很方便。不僅如此，通過選擇器，我們還可以實現(xiàn)各種復(fù)雜的指定，同時也能大量減少樣式表的代碼書寫量，最終書寫出來的樣式表也變得簡潔明了。

具體來說，使用選擇器進(jìn)行樣式指定時，采用類似E[foo$="val"]這種正則表達(dá)式的形式。在樣式中，聲明該樣式應(yīng)用于什么元素，該元素的某個屬性的屬性值必須是什么。例如，我們可以指定將頁面中id為“div_Big”的div元素的背景色設(shè)定為紅色，代碼如下所示。

div[id="div_Big"] {background: red;}

這樣，符合這個條件（id為“div_Big”）的div元素的背景色被設(shè)為紅色，不符合這個條件的div元素不使用這個樣式。

另外，我們還可以在指定樣式時使用“^”通配符（開頭字符匹配）、“？”通配符（結(jié)尾字符匹配）與“*”通配符（包含字符匹配）。如指定id末尾字母為“t”的div元素的背景色為藍(lán)色，代碼如下所示。

div[id$="t"] {background: red;}

使用通配符能大大提高樣式表的書寫效率。