果冻公开课第三课：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了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人记得备注来自果冻课堂哟
推荐阅读：
