完整的 CSS 选择器速查表：带图片的实用指南😍

CSS 选择器看似颇具挑战性，因为它们提供了丰富的选项来选择需要设置样式的 HTML 元素，因此了解各种可用选项及其工作原理至关重要。此外，选择器还允许您根据元素、类、ID、属性，甚至伪元素的结构及其与 HTML 中其他元素的关系来定位它们。

📒 因此，我提供了 CSS 选择器的完整指南/速成课程/备忘单（无论您怎么称呼它），以使您的生活更轻松。

基本选择器

姓名	CSS	描述	结果
Universal Selector	*	Select all elements
Type	div	Select elements of that type`
Class	.c	Select elements with that class
Id	#i	Select elements with that id

选择器组合

姓名	CSS	描述	结果
Descendant	div a	Select elements that are descendants of the first element
Direct Child	div > a	Select elements that are direct children of the first element
General Sibling	div ~ a	Select elements that are siblings of the first element and come after the first element
Adjacent Sibling	div + a	Select elements that are siblings of the first element and come directly after the first element
Or	div, a	Select elements that match any selector in the list
And	div.c	Select elements that match all the selector combinations

属性

姓名	CSS	描述	结果
Has	[a]	Select elements that have that attribute
Exact	[a=”1”]	Select elements that have that attribute with exactly that value
Begins With	[a^=”1”]	Select elements that have that attribute which start with that value
Ends With	[a$=”1”]	Select elements that have that attribute which end with that value
Substring	[a*=”1”]	Select elements that have that attribute which contain that value anywhere

伪元素选择器

姓名	CSS	描述	结果
Before	div::before	Creates an empty element directly before the children of selected element
After	div::after	Creates an empty element directly after the children of selected element

伪类状态

伪类位置/其他

姓名	CSS	描述	结果
First Child	a:first-child	Select elements that are the first child inside a container
Last Child	a:last-child	Select elements that are the last child inside a container
Nth Child	a:nth-child(2n)	Select elements that are the nth child inside a container based on the formula
Nth Last Child	a:nth-last-child(3)	Select elements that are the nth child inside a container based on the formula counting from the end
Only Child	a:only-child	Select elements that are the only child inside a container
First Of Type	a:first-of-type	Select elements that are the first of a type inside a container
Last Of Type	a:last-of-type	Select elements that are the last of a type inside a container
Nth Of Type	a:nth-of-type(2n)	Select elements that are the nth of a type inside a container based on the formula
Nth Last Of Type	a:nth-last-of-type(2)	Select elements that are the nth of a type inside a container based on the formula counting from the end
Only Of Type	a:only-of-type	Select elements that are the only of a type inside a container
Not	a:not(.c)	Select all elements that do not match the selector inside the not selector

结论

我希望我能快速地向你解释完所有这些 CSS 选择器。如果文章中有任何错误或我遗漏了什么，请在评论区指出。

感谢阅读本文。我们下篇文章再见👨‍💻