子選擇器(>)

.food>li{border:1px solid red;}
後代選擇器（空格）

包含選擇器，即加入空格,用於選擇指定標簽元素下的後輩元素。如右側代碼編輯器中的代碼：

.first  span{color:red;}

這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變為紅色。

請註意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結：>作用於元素的第一代後代，空格作用於元素的所有後代。

通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：

* {color:red;}
偽選擇器（用於設置標簽的狀態的樣式）

它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色：

a:hover{color:red;}

上面一行代碼就是為 a 標簽鼠標滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變為紅色特效。

關於偽選擇符：

關於偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標簽上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中，但是因為不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標簽上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。

子選擇器、後代選擇器和通用選擇器以及偽選擇器