什么是CSS選擇器

顧名思義，CSS選擇器就是通過某些規則選中頁面上的HTML元素，并且把樣式應用到選中的元素上。

通用選擇器

通用選擇器就是選中所有元素，代碼如下：意思就是選中頁面上所有元素，并且把它們的文字都設置為紅色。

ID選擇器

ID選擇器就是通過ID屬性來選中元素，這個ID選擇器最好不用在頁面上重復。

比如說你已經設置了一個div元素的ID是“id='test1'”，你再設置一個元素的ID也是“id='test1'”，那如果你使用document.getElementById的時候只能獲取到第一個設置Id的元素，所以建議在頁面上使用ID選擇器的時候一定要保證ID的唯一性。

類選擇器

類選擇器是根據元素的類屬性來選中元素，平時在開發中經常使用到的就是類選擇器，代碼如下：

元素選擇器

元素選擇器就是根據元素名稱來選中元素，比如說要選中所有的p元素，那我們就是可以使用p {}來做，代碼如下：

后代選擇器

后端選擇器是用來選中某個元素的后代，注意這里的后代包含子元素、孫元素等等所有的后代元素，要和子元素選擇器區分開來，代碼如下：

子元素選擇器

子元素選擇器用來選中某個元素的子元素，注意這里只是子元素，如果是孫元素，那就不能被選中，代碼如下：

屬性選擇器

通過元素的屬性來匹配HTML元素，這里面既可以使用屬性名也可以使用屬性值，代碼如下圖：

相鄰后面兄弟選擇器

這個選擇器是用來選擇某元素后面相鄰的兄弟元素的，代碼如下：

通用后面兄弟選擇器

這個選擇器是用來選中某元素后面所有的兄弟元素，要注意它和相鄰后面兄弟選擇器之間的區別，代碼如下：