前言:
此刻同学们对“css果冻”大致比较关注,小伙伴们都需要了解一些“css果冻”的相关文章。那么小编在网上汇集了一些对于“css果冻””的相关知识,希望我们能喜欢,我们一起来了解一下吧!在前端界有过这么一个上古传说,传说只要掌握了CSS选择器,就能成为页面之神。
动画视频
文字解析
概述
CSS选择器,简单来说,就是选择Html元素的工具。
如果将网页当作一座动物园,html元素则是动物园里的动物。
每只动物都有属于它自己的种类,属性,亲属,状态等等特征。
动物园园长为了根据这些特征准确选中小动物,创造了css选择器。
园长将最常用的选择器分为了以下6个类型:
第一种,ID选择器
给小动物颁发id就等于发了一张身份证,代表它的唯一编号。
这样园长就可以准确找到这只小狗和那只花猫了。不过在一段时间后,小狗从当初的一只两只变成了一群,再使用id来点名,恐怕就有点难办了。
不如按小动物的种类来点名?
第二种,标签选择器
选择方式非常简单,直接使用标签名。就好比,动物种类的名字。
干得不错,所有的猫都有了一条黑色边框,啊哈,狗也一样。
又过了一段时间,小动物越来越多,想要选中小动物越来越难,用id选得太慢,用标签又范围太大。
报告园长,我们还有第三种选择器,类选择器,了解一下?
第三种,类选择器
通过人为的给小动物标注上别名,就能通过这个别名—类,选择一群小动物。
除此之外,还有一种挺特殊的选择器,是:
第四种选择器:伪类选择器。
伪类区别于类的地方在于,类选择器可以随便起名:
小猫小狗可以随便叫旺财、来福,也可以根据它的特征来叫大胖小花。
但伪类选择器不可以,不能随便起名,它一般反映无法在CSS中轻松可靠检测到的元素的状态或者属性。
在进行选择时,在状态或属性前面加上冒号就可以了。
没有被取名的小动物不满意了:
虽然我们没有类名,但我们长得有特色啊!
园长,总是给取名也挺费脑的,要不试试属性选择器?
第五种:属性选择器
通过属性选择器为拥有特定属性的小动物设置样式,再将属性和值用中括号包裹起来即可。
除了之前说到的5种选择器之外,还有一种:
第六种:结构选择器
通过亲属结构兄弟父子等,来进行选择。
比如,tony的子孙里所有叫nick的小动物,可以这样选择。 而tony的儿子里所有叫nick的小动物,可以这样选择。
最后紧挨tony后面站着那个叫nick的小动物,则可以这样选择。
这就是我们的网页动物园里最主要的6种选择器,分别是:
ID选择器、标签选择器、类选择器、伪类选择器、属性选择器、和结构选择器。
-------------------
标签: #css果冻