果冻公开课第三课：CSS选择器

在前端界有过这么一个上古传说，传说只要掌握了CSS选择器，就能成为页面之神。

动画视频：

【果冻公开课】前端学习：CSS选择器_腾讯视频

果冻公开课第三课：CSS选择器

文字解析

概述

CSS选择器，简单来说，就是选择Html元素的工具。

如果将网页当作一座动物园，html元素则是动物园里的动物。

每只动物都有属于它自己的种类，属性，亲属，状态等等特征。

动物园园长为了根据这些特征准确选中小动物，创造了css选择器。

园长将最常用的选择器分为了以下6个类型：

第一种，ID选择器

给小动物颁发id就等于发了一张身份证，代表它的唯一编号。

这样园长就可以准确找到这只小狗和那只花猫了。不过在一段时间后，小狗从当初的一只两只变成了一群，再使用id来点名，恐怕就有点难办了。

不如按小动物的种类来点名？

第二种，标签选择器

选择方式非常简单，直接使用标签名。就好比，动物种类的名字。

干得不错，所有的猫都有了一条黑色边框，啊哈，狗也一样。

又过了一段时间，小动物越来越多，想要选中小动物越来越难，用id选得太慢，用标签又范围太大。

报告园长，我们还有第三种选择器，类选择器，了解一下？

第三种，类选择器

通过人为的给小动物标注上别名，就能通过这个别名—类，选择一群小动物。

除此之外，还有一种挺特殊的选择器，是：

第四种选择器：伪类选择器。

伪类区别于类的地方在于，类选择器可以随便起名：

小猫小狗可以随便叫旺财、来福，也可以根据它的特征来叫大胖小花。

但伪类选择器不可以，不能随便起名，它一般反映无法在CSS中轻松可靠检测到的元素的状态或者属性。

在进行选择时，在状态或属性前面加上冒号就可以了。

没有被取名的小动物不满意了：

虽然我们没有类名，但我们长得有特色啊！

园长，总是给取名也挺费脑的，要不试试属性选择器？

第五种：属性选择器

通过属性选择器为拥有特定属性的小动物设置样式，再将属性和值用中括号包裹起来即可。

除了之前说到的5种选择器之外，还有一种：

第六种：结构选择器

通过亲属结构兄弟父子等，来进行选择。

比如，tony的子孙里所有叫nick的小动物，可以这样选择。

而tony的儿子里所有叫nick的小动物，可以这样选择。

最后紧挨tony后面站着那个叫nick的小动物，则可以这样选择。

这就是我们的网页动物园里最主要的6种选择器，分别是：

ID选择器、标签选择器、类选择器、伪类选择器、属性选择器、和结构选择器。

都记住了吗？

好了，今天的果冻公开课就先到这，咱们下期见啦~

更多内容，欢迎加大师姐微信

入群了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟

微信号：it_xzy

记得备注来自果冻课堂