龙空技术网

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

果冻公开课 57

前言:

此刻同学们对“css果冻”大致比较关注,小伙伴们都需要了解一些“css果冻”的相关文章。那么小编在网上汇集了一些对于“css果冻””的相关知识,希望我们能喜欢,我们一起来了解一下吧!

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

动画视频

文字解析

概述

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

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

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

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

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

第一种,ID选择器

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

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

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

第二种,标签选择器

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

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

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

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

第三种,类选择器

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

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

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

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

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

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

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

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

虽然我们没有类名,但我们长得有特色啊!

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

第五种:属性选择器

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

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

第六种:结构选择器

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

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

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

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

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

-------------------

标签: #css果冻