果凍公開課第三課：CSS選擇器
在前端界有過這麼一個上古傳說，傳說只要掌握了CSS選擇器，就能成為頁面之神。
動畫視頻
果凍公開課第三課：CSS選擇器 https://www.zhihu.com/video/1033383118367072256 文字解析
概述
CSS選擇器，簡單來說，就是選擇Html元素的工具。
如果將網頁當作一座動物園，html元素則是動物園裡的動物。
每隻動物都有屬於它自己的種類，屬性，親屬，狀態等等特徵。
動物園園長為了根據這些特徵準確選中小動物，創造了css選擇器。
園長將最常用的選擇器分為了以下6個類型：
第一種，ID選擇器
給小動物頒發id就等於發了一張身份證，代表它的唯一編號。
這樣園長就可以準確找到這隻小狗和那隻花貓了。不過在一段時間後，小狗從當初的一隻兩隻變成了一群，再使用id來點名，恐怕就有點難辦了。
不如按小動物的種類來點名？
第二種，標籤選擇器
選擇方式非常簡單，直接使用標籤名。就好比，動物種類的名字。
幹得不錯，所有的貓都有了一條黑色邊框，啊哈，狗也一樣。
又過了一段時間，小動物越來越多，想要選中小動物越來越難，用id選得太慢，用標籤又範圍太大。
報告園長，我們還有第三種選擇器，類選擇器，了解一下？
第三種，類選擇器
通過人為的給小動物標註上別名，就能通過這個別名—類，選擇一群小動物。
除此之外，還有一種挺特殊的選擇器，是：
第四種選擇器：偽類選擇器。
偽類區別於類的地方在於，類選擇器可以隨便起名：
小貓小狗可以隨便叫旺財、來福，也可以根據它的特徵來叫大胖小花。
但偽類選擇器不可以，不能隨便起名，它一般反映無法在CSS中輕鬆可靠檢測到的元素的狀態或者屬性。
在進行選擇時，在狀態或屬性前面加上冒號就可以了。
沒有被取名的小動物不滿意了：
雖然我們沒有類名，但我們長得有特色啊！
園長，總是給取名也挺費腦的，要不試試屬性選擇器？
第五種：屬性選擇器
通過屬性選擇器為擁有特定屬性的小動物設置樣式，再將屬性和值用中括弧包裹起來即可。
除了之前說到的5種選擇器之外，還有一種：
第六種：結構選擇器
通過親屬結構兄弟父子等，來進行選擇。
比如，tony的子孫里所有叫nick的小動物，可以這樣選擇。 而tony的兒子里所有叫nick的小動物，可以這樣選擇。
最後緊挨tony後面站著那個叫nick的小動物，則可以這樣選擇。
這就是我們的網頁動物園裡最主要的6種選擇器，分別是：
ID選擇器、標籤選擇器、類選擇器、偽類選擇器、屬性選擇器、和結構選擇器。
都記住了嗎？
好了，今天的果凍公開課就先到這，咱們下期見啦~
這裡是果凍公開課，一個用趣味的動畫來分享IT知識的課堂
我們將原本複雜、不易理解的編程知識，轉化為一個個有趣的動畫短視頻，為更多人提供生動有趣的IT內容/服務
無論是大咖還是小白，都可以快速學會並深度了解每一個知識點，讓IT，Q彈可口。
更多內容，歡迎加大師姐微信it_xzy，入群717415872了解課程動態、幕後花絮，還有機會參與到課程製作，成為聯合製作人記得備註來自果凍課堂喲
推薦閱讀：
