本節書摘來自華章社群《圖解css3：核心技術與案例實戰》一書中的第2章，第2.2節基本選擇器，作者 大漠，更多章節内容可以通路雲栖社群“華章社群”公衆号檢視
2.2 基本選擇器
基本選擇器是css中使用最頻繁、最基礎，也是css中最早定義的選擇器，這部分選擇器在css1中就定義了，為了便于初學者溫故而知新，不妨回顧css的基礎選擇器。
2.2.1 基本選擇器文法
通過基本選擇器可以确定html樹形結構中大多數的dom元素節點。其詳細說明如表2-1所示。
2.2.2 浏覽器相容性
浏覽器相容性如表2-2所示。從表中可以看出，浏覽器對基本選擇器都是一路綠燈通行，大家可以放心使用。
2.2.3 實戰體驗：使用基本選擇器
下面通過示例介紹各種基本選擇器在頁面中的使用方法。
頁面中有一個清單，其中第一個和最後一個設定了id屬性，其中部分清單項設定了class類名，通過基本選擇器來改變元素的樣式風格。
新建立一個html檔案2-1.html，加入以下代碼。
上面代碼使用了基本選擇器，首先看看頁面的初步效果（背景為粉紅色），如圖2-2所示。
下面通過圖解的方法說明css3基本選擇器的使用方法。
2.2.4 通配選擇器
通配選擇器（*）用來選擇所有元素，當然也可以選擇某個元素下的所有元素。如：
上面一行代碼大家在reset樣式檔案中經常看到，表示所有元素的margin和padding都設定為0。為了更好地說明問題，通過css3選擇器中的通配選擇器來改變清單中所有子項的背景色設定為orange。
此時元素類名為demo下的所有元素都将背景色設定為橙色，如圖2-3所示。
2.2.5 元素選擇器
元素選擇器（e）是css選擇器中最常見、最基本的選擇器。文檔的元素包括html、body、p、iv等，如示例中ul、li也屬于html元素。接下來通過ul元素選擇器改變整個清單的背景色。
此時清單ul的背景色将變成灰色，如圖2-4所示。
2.2.6 id選擇器
在使用id選擇器（#id）之前，需要在html文檔中給對應的元素設定id屬性并設定其值，才能找到對應的元素。id選擇器具有唯一性，在一個頁面中不會同時出現id相同的屬性值。在css樣式中使用id選擇器時，需要在id屬性值的前面加上“#”号，如（#id）。在下面這個示例中，可以輕松地看到清單中的第一項和最後一項分别定義了一個id，其值分别為“first”和“last”。使用這兩個id值來改變清單項中第一個和最後一個清單項的背景色和前景色，代碼如下。
頁面效果如圖2-5所示。
2.2.7 類選擇器
類選擇器（.class）是以獨立于文檔元素的方式來指定元素樣式。使用方法與id選擇器極其相似，首先在html給需要的元素定義class屬性，并為其設定屬性值。其與id選擇器有一個很大不同之處。“類選擇器在一個頁面中可以有多個相同的類名，而id選擇器其id值在整個頁面中是唯一的一個”。同樣，看看如何通過類選擇器來改變元素的樣式。
頁面效果就變成圖2-6所示的風格了。
上面是類選擇器的簡單使用，其實類選擇器還有一種使用方法，就是多類選擇器。通過兩個或兩個以上類選擇器合并，來定義有别于一個類名的元素效果。
使用多類選擇器時，大家需要注意，如果一個多類選擇器包含的類名中其中有一個不存在，這個選擇器将無法找到相比對的元素，正如上面的代碼，其隻能比對li元素同時具有“item”和“important”的元素，而隻有其中任何一個類名都将無法比對，如圖2-7所示。
ie 6選擇器并不支援多類名選擇器，其将以末尾類名為準，大家使用時千萬小心。
由于類名在一個html文檔中可以同時存在于不同的元素标簽上。換句話說，在一個html文檔中，div可以有類名“block”，ul也可以有類名“block”，但有時在web的頁面開發中，僅需要對ul為“block”定義樣式，此時僅采用類名選擇器并不能達到需要的效果，其實css選擇器還支援帶有标簽的類名選擇器“ul.block”。
上面的代碼隻比對class屬性包含“block”的所有ul元素，但其他任何類型的元素都不比對，包括有“blcok”類名的元素。簡而言之，“ul.block”隻會比對ul元素，并且有一個類名“block”。不符合這兩個條件的任何一個都不能與選擇器比對。
2.2.8 群組選擇器
群組選擇器（selector1,selectorn）是将具有相同樣式的元素分組在一起，每個選擇器之間用逗号（，）隔開，例如“selector1,selector2,…,selectorn”。這個逗号告訴浏覽器，規則中包含多個不同的選擇器，省去逗号就成了後代選擇器，這一點大家在使用中千萬要小心。
注
意 “selector1,selectorn”是群組選擇器，表示選擇比對為selector1和selectorn的所有元素；“selector1 selectorn”是後代選擇器（後面介紹），表示選擇器selectorn所有元素為selector1的後代元素。