CSS选择器备忘单和详细信息

CSS选择器备忘单

最近,我一直在研究CSS选择器。

CSS选择器有很多,它们带有>。 ,* +〜[]等,所以我经常对CSS选择器的工作方式感到困惑。最终,我把它们弄清楚了,重新设计了它们的理解方式。

*实际上,我本来希望将它们组织在一个A4尺寸的页面上,以节省纸张并保存地球,但我不能,因为我想添加的选择器太多,所以我不得不翻阅不止一页。除封面外,全部为A4四页。

打印该备忘单并将其粘贴在墙上。不要记住它们,只是偷窥。我希望此信息图可以帮助您快速找到合适的CSS选择器并节省时间。

CSS选择器备忘单Ryan Yu的CSS选择器游戏

前往下载CSS选择器备忘单并享受游戏🕹

别担心。全部免费。

ive深入CSS选择器。

我将列出信息图以及MDN定义,以使您更轻松。

类型选择器

CSS类型选择器按节点名称匹配元素。换句话说,它选择文档中给定类型的所有元素。 -MDN

类型选择器

ID选择器

根据其id属性的值选择一个元素。文档中应只有一个具有给定ID的元素。 -MDN

ID选择器

后代选择器

任何与B匹配的元素,它是与A匹配的元素的后代(即,一个孩子或一个孩子的孩子,等等)。组合符是一个或多个空格或大于符号的两倍。 -MDN

后代选择器

结合后代和ID选择器

结合后代和ID选择器

类选择器

CSS类选择器根据其class属性的内容来匹配元素。 -MDN

类选择器

结合类选择器

结合类选择器

逗号组合器

匹配A和/或B的任何元素。-MDN

逗号组合器

通用选择器

只要选择一切!

通用选择器

结合通用选择器

结合通用选择器

相邻兄弟选择器

相邻的同级组合器(+)分隔两个选择器,并且仅在第二个元素紧随第一个元素之后才与第二个元素匹配,并且两者都是同一个父元素的子元素。 -MDN

相邻兄弟选择器

通用兄弟选择器

通用同级组合器(〜)分隔两个选择器,并且仅在第二个元素紧随第一个元素之后(尽管不一定紧随其后)才与第二个元素匹配,并且两者都是同一父元素的子元素。 -MDN

通用兄弟选择器

儿童选择器

子组合器(>)放在两个CSS选择器之间。它仅匹配第二个选择器匹配的那些元素,它们是第一个选择器匹配的元素的子元素。 -MDN

儿童选择器

第一个孩子伪选择器

:first-child CSS伪类表示一组同级元素中的第一个元素。 -MDN

第一个孩子伪选择器

独生子伪选择器

:only-child CSS伪类表示一个没有任何同级元素的元素。这与:first-child:last-child或:nth-​​child(1):nth-​​last-child(1)相同,但特异性较低。 -MDN

独生子伪选择器

最后一个孩子伪选择器

:last-child CSS伪类表示一组同级元素中的最后一个元素。 -MDN

最后一个孩子伪选择器

第N个儿童伪选择器

:nth-​​child()CSS伪类根据元素在一组同级中的位置来匹配元素。 -MDN

第N个儿童伪选择器

第N个最后一个孩子选择器

:nth-​​last-child()CSS伪类根据元素在一组兄弟姐妹中的位置(从末尾开始计数)来匹配元素。 -MDN

第N个最后一个孩子选择器

第一类选择器

:first-of-type CSS伪类表示一组兄弟元素中其类型的第一个元素。 -MDN

第一类选择器

类型选择器的第N个

:nth-​​of-type()CSS伪类根据元素在一组同级元素中的位置来匹配给定类型的元素。 -MDN

类型选择器的第N个

具有公式的第N个选择器

N型选择器
注意:
:nth-​​of-type(偶数)
:nth-​​of-type(奇数)
:nth-​​of-type(2)
:nth-​​of-type(2n)
:nth-​​of-type(3n-1)
:nth-​​of-type(2n + 2)

仅类型选择器

:only-of-type CSS伪类表示一个元素,该元素没有相同类型的兄弟姐妹。 -MDN

仅类型选择器

最后一个类型选择器

:last-of-type CSS伪类表示一组同级元素中该类型的最后一个元素。 -MDN

最后一个类型选择器

空选择器

:empty CSS伪类表示没有子元素的任何元素。子级可以是元素节点,也可以是文本(包括空格)。注释,处理说明和CSS内容不会影响元素是否为空。 -MDN

空选择器

否定伪类

:not()CSS伪类表示与选择器列表不匹配的元素。由于它会阻止选择特定项目,因此称为否定伪类。 -MDN

否定伪类

属性选择器

属性选择器是一种特殊的选择器,它将根据元素的属性和属性值进行匹配。它们的通用语法由方括号([])组成,方括号([])包含属性名称,后跟可选条件以与属性值匹配。根据属性选择器与属性值匹配的方式,它们可以分为两类:在线状态和值属性选择器以及子字符串值属性选择器。 -MDN

属性选择器

属性值选择器

属性值选择器

属性从选择器开始

该选择器将选择属性属性为attr的所有元素,其值以val开头。 -MDN

属性从选择器开始

属性以选择器结尾

该选择器将选择属性属性为attr的所有元素,其值以val结尾。 -MDN

属性以选择器结尾

属性通配符选择器

该选择器将选择属性属性为attr的所有元素,其值包含子字符串val。 (子字符串只是字符串的一部分,例如“ cat”是字符串“ caterpillar”中的子字符串。)-MDN

属性通配符选择器

恭喜,您已经完成

文章

🕹CodePen

questions任何问题或反馈

我很想听听您关于如何为您做得更好的反馈。请在下面或通过我的Twitter留下您的评论。

非常感谢Ryan Yu帮助我制作CSS选择器游戏。于安(Ryan Yu)是《 FrontEnd30 />》的作者,在那里我学到了许多很酷的前端技术。

今天快乐的codesign