1. 元素選擇器

這是最基本的選擇器，HTML中的html、p、h1、h2、h3、em、a等這些個元素自身就可以是選擇器，例如

html {color:white;}
h1 {color: gray;}
h2 {color: silver;}

2. 通配選擇器——* 

這個選擇器能夠匹配到HTML文件中所有的元素，例子：

* {color: red;}

3 類選擇器

帶有class屬性的元素，可以使用class屬性的值來進行選擇，比如一段HTML文件有以下內容：

<p class="warning">This  is a warn!</p>

那麼，為了根據類來選擇到對應的元素，並設定CSS風格，我們可以這樣做

p.warning {font-weight: bold;}
 

這個選擇器只有對帶有warning類的p元素才起作用，如果我們想要對所有帶有warning類的元素都引用這個樣式，我們可以將選擇器寫成*.warning 或者直接寫成 .warning。

4 多類選擇器

從類選擇器中衍生出的多類選擇器，通過把兩個類選擇器接在一起，可以選擇到同時包含著兩個類名的元素，這個過程中類名的順序無關緊要。比如一段文件中有以下內容：

<p class="warning urgent help">There is a multiple class selecor here</p>

可以通過以下方式來選擇到這個元素：

.urgent.warning {
	background-color: red;
}
 

而，.warning.help的選擇器同樣能夠成功選擇到這個元素。

5 ID選擇器

ID選擇器通過應用某個元素中id屬性的值來選擇到這個元素，假設一個HTML文件中有以下的內容：

<p id="iamaid">Hello world!</p>

為了將Hello world!的背景色變成綠色，我們可以這樣使用ID選擇器：

#iamaid {background-color: green;}

6 屬性選擇器

如果我們想為所有具有class屬性的元素的內容的顏色設定成紅色，那麼我們可以通過以下方式選擇到所有帶有class屬性的元素：

*[class] {color: red;}
 

而如果我們想同時選擇帶有class 並帶有href屬性的元素的時候，非常簡單，只需要將附加的屬性href附加到以上選擇其中即可：

*[class][href] {color: red;}

其中，class與href的順序是無所謂的。

7 屬性值選擇器

首先需要知道的是，根據屬性的值進行匹配的時候，實際上是進行的一個字串是否相等的判斷，如果字串的值相等才能匹配，所以如果對於class屬性有多個類指定的情況下，選擇器也必須按照完全相同的順序寫完class的完整的值。

比如對於如下的HTML文件

<p class="warning urgent help">There is a multiple class selecor here</p>

如果我們想要通過屬性值選擇器選擇到這個p元素並將其背景顏色設定成紅色的話，我們必須寫成這樣：

p[class="urgent warning help"] {
	background-color: red;
}

8 部分屬性值選擇器

考慮如下HTML文件

<p class="test1 test2     test3        test4">Hello tests!</p>

 如果這個時候我們使用屬性值選擇器的時候，因為是做的字串的相等比較，那麼我們必須按照原樣將class的屬性值寫到我們的選擇器中，甚至其中那些可惡的空格也必須一個不少的寫上，否則就會匹配不到。而是用部分屬性值選擇器，它可以使用屬性的多個值中的一個進行選擇，而這所謂的多個值僅僅是將字串以空格分割之後形成的多個部分。具體到以上的這段HTML文件，如果要選擇到這個元素，可以通過以下部分屬性值選擇器：

p[class~="test4"] {
	color: green;
}

除了以上的這種匹配之外，很多瀏覽器還提供了字串匹配選擇器，這種方式借用了正則表達的一些符號:

p[class^="test1"]  選擇class值以test1為開頭的所有元素（value.startswith("test1")）

p[class$="test4"] 選擇class值以test4為結尾的所有元素(value.endswith("test4"))

p[class*="test"] 選擇class中包含test的所有元素（value.contains("test")）

所以以上三個選擇器都能夠選擇到我們本部分中的那個p元素。

以上就是CSS中各種選擇器的一個總結。