CSS选择器大全

选择器在CSS中的重要性毋庸置疑。

自从CSS1开始,选择器就已经存在,下面先把CSS1的选择器列出来,然后再列出CSS2.1基于CSS1新增或加强的,最后是CSS3中的选择器。

這样也可以有种层次感,便于记忆。

CSS1 时期-选择器

这里写图片描述

总结一下,CSS1中提供的选择器有:三个最基本的选择器,一个后代选择器,五个伪类选择器,两个伪元素选择器。

CSS1中给出的选择器功能是非常弱的额,覆盖范围也非常单薄,所以在此基础上,CSS2提出了更加强大的选择器,如:新增加的属性选择器,加强版的伪元素选择器。

如下:

这里写图片描述
这里写图片描述

以上就是CSS2的选择器,配合着CSS1已经有的选择器,已经可以选择到绝大多数的元素.

CSS2选择器中最大亮点是新增的属性选择器。

比较容易混淆的是:first-child选择器。

用法比较复杂的是::after::before选择器。这两个选择器用的溜起来之后,可以做很多很奇妙的效果。

最后是加强版的后代选择器E>FE+F,这两个选择器也是非常强大和好用的。

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
CSS3新增了许多强大的选择器。

三个新增属性选择器,再和CSS2中的四个选择器结合起来,就形成了一个很完善的选择系统。

接着的是十一个结构伪类选择器,再CSS2中仅有一个,CSS3一口去增加了十一个,那么它的能力也是毋庸置疑的了。

还有就是UI状态选择器就是用在表单上的了,可以实现很人性化的效果。

最后就是一些在CSS3中无法归类的,但是却可以归到CSS2和CSS1中,其中:not(s)和E~F的用处都非常大,:target的应用场景就比较特定。

选择器是CSS重中之重,学习必要性毋庸置疑,这里只是列出来了所有选择器,以后我有任何关于选择的想法或用法都会在这里更新。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值