CSS之选择器(三)

345 阅读2分钟

「这是我参与11月更文挑战的第十五天,活动详情查看:2021最后一次更文挑战」。

往期链接:

CSS之选择器

CSS之选择器(二)

前言

今天,还是和上一章一样,继续我们的选择器分类,着实有点多啊!手都要敲麻,不过说,虽然表格一点一点敲出来,手麻了,眼花了,但我觉得我对打大掘金的表格写法,更精进了呢。

分类

伪元素

选择器说明
::before在节点前插入的内容
::after在节点后插入的内容

结构选择器

结构选择还是用的比较多的,尤其last-child和last-child这两个,不知道你是不是呢?

|ू・ω・)

选择器说明
:root文档的根节点
:empty无子节点的节点
:first-line元素的首行
:first-child元素中为首的节点
:last-child元素中为尾的节点
:only-child父元素仅有该元素的节点
:first-letter节点的首字母
:nth-child(n)元素中指定顺序索引的节点
:first-of-type标签中为首的标签
:last-of-type标签中为尾标签
:only-of-type父元素仅有该标签的标签
:nth-of-type(n)标签中指定顺序索引的标签
:nth-last-child(n)元素中指定逆序索引的节点
:nth-last-of-type(n)标签中指定逆序索引的标签

属性选择器

| 选择器 | 说明 | | | --- | --- | | [attr] | 指定属性的节点 | | [attr=val] | 属性等于指定值的节点 | | [attr|=val] | 属性以指定值(完整单词)开头的节点(不推荐使用) | | [attr*=val] | 属性包含指定值的节点 | | [attr^=val] | 属性以指定值开头的节点 | | [attr$=val] | 属性以指定值结尾的节点 | | [attr~=val] | 属性包含指定值(完整单词)的节点(不推荐使用) |

好,终于算是把选择器的分类给敲完了,真是累死了,瘫了,瘫了,希望我的文章能稍微对你起到作用,哪怕是一丢丢的作用,我的努力也没有白费,所以,大家一定要好好看哦,千万不要偷懒,扫一眼就完事了,答应我,看完。

今天就到这里了,拜了个拜,今天努力的你依然是最棒的。加油,加油,你最棒!加油,加油,你最强!哦豁,Bye Bye!!!