《HTML 5與CSS 3權威指南（第3版·下冊）》——19.1 選擇器概述

本節書摘來自華章出版社《html 5與css 3權威指南（第3版·下冊）》一 書中的第19章，第19.1節，作者：陸淩牛，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。

選擇器是css 3中一個重要的内容。使用它可以大幅度提高開發人員書寫或修改樣式表時的工作效率。

在樣式表中，一般會書寫大量的代碼，在大型網站中，樣式表中的代碼可能會達到幾千行。麻煩的是，當整個網站或整個web應用程式全部書寫好之後，需要針對樣式表進行修改時，在洋洋灑灑一大篇css代碼之中，并沒有說明什麼樣式服務于什麼元素，隻是使用了class屬性，然後在頁面中指定了元素的class屬性。但是，使用元素的class屬性有兩個缺點：第一，class屬性本身沒有語義，它純粹用來為css樣式服務，屬于多餘屬性；第二，使用class屬性的話，并沒有把樣式與元素綁定起來，針對同一個class屬性，文本框也可以使用，下拉框也可以使用，甚至按鈕也可以使用，這樣其實是非常混亂的，修改樣式時也很不友善。

是以，在css 3中，提倡使用選擇器來将樣式與元素直接綁定起來，這樣的話，在樣式表中什麼樣式與什麼元素相比對變得一目了然，修改起來也很友善。不僅如此，通過選擇器，我們還可以實作各種複雜的指定，同時也能大量減少樣式表的代碼書寫量，最終書寫出來的樣式表也變得簡潔明了。

具體來說，使用選擇器進行樣式指定時，采用類似e[foo$="val"]這種正規表達式的形式。在樣式中，聲明該樣式應用于什麼元素，該元素的某個屬性的屬性值必須是什麼。例如，我們可以指定将頁面中id為“div_big”的div元素的背景色設定為紅色，代碼如下所示。