什么是CSS選擇器

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

通用選擇器

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

ID選擇器

ID選擇器就是通過(guò)ID屬性來(lái)選中元素，這個(gè)ID選擇器最好不用在頁(yè)面上重復(fù)。

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

類選擇器

類選擇器是根據(jù)元素的類屬性來(lái)選中元素，平時(shí)在開(kāi)發(fā)中經(jīng)常使用到的就是類選擇器，代碼如下：

元素選擇器

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

后代選擇器

后端選擇器是用來(lái)選中某個(gè)元素的后代，注意這里的后代包含子元素、孫元素等等所有的后代元素，要和子元素選擇器區(qū)分開(kāi)來(lái)，代碼如下：

子元素選擇器

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

屬性選擇器

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

相鄰后面兄弟選擇器

這個(gè)選擇器是用來(lái)選擇某元素后面相鄰的兄弟元素的，代碼如下：

通用后面兄弟選擇器

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