CSS选择器，一篇文章就够了选择器可以分为以下几类：简单选择器：通过元素类型、类或id来匹配一个或多个元素。属性选择器：通过属性/属性值匹配一个或多个元素。伪类：匹配一个或多个处于某种状态的元素，例如鼠标指针悬停的元素，或者当前选中或未选中的复选框，或者是父节点中的元素DOM树的第一个子节点。伪元素（Pseudo-elements）：在相关的确定位置匹配一个或多个元素，例如每个段落的第一个词，或者某个元素之前生成的内容。组合器：不仅有选择器本身，还有以有效方式组合两个或多个选择器以进行非常具体的选择的方法。例如，您可以仅选择作为div的直接子项的段落，或紧跟在标题之后的段落。多重选择器：这些也不是单独的选择器；这个想法是在单个CSS规则下放置多个用逗号分隔的选择器，以将一组声明应用于所有元素。简单选择器类型选择器（又名：元素选择器）这个选择器只是选择器名称和指定的HTML元素名称之间的不区分大小写的匹配。这是选择所有指定类型的最简单方法。类选择器（Classselectors）类选择器由一个点“.”组成。和班级后的班级名称。类名是HTML类文档元素属性中不带空格的任何值。自己选择一个名字。还值得一提的是，文档中的多个元素可以有相同的类名，单个元素可以有多个类名（用空格分隔多个类名）。ID选择器ID选择器由井号/井号(#)和后跟给定元素的ID名称组成。任何元素都可以使用id属性设置唯一的ID名称。自己选的ID是什么。这是选择单个元素的最有效方法。重要提示：ID名称在文件中必须是唯一的。关于重复ID的行为是不可预测的，例如，在某些浏览器中，只计算第一个实例而忽略其余实例。通用选择器通用选择器(*)是终极王牌。它允许选择页面中的所有元素。由于对每个元素应用相同的规则几乎没有实际价值，因此更常见的是将它与其他选择器结合使用。重要说明：使用通用选项时要小心。因为它适用于所有元素，所以在大页面上使用它会对性能产生显着影响：页面显示速度可能比预期慢。您想使用此选项的情况并不多。组合器在CSS中，组合器允许您将多个选择器组合在一起，这允许您选择其他元素内的元素，或与其他元素相邻的元素。四种可用类型是：后代选择器-（空格键）-允许您选择嵌套在另一个元素中的元素（不一定是直系后代；例如，它可以是孙代）。子选择器-->--允许您选择作为另一个元素的直接子元素的元素。相邻兄弟选择器--+--允许您选择一个元素，该元素是另一个元素的直接兄弟（即，在它旁边，在层次结构中处于同一级别）。通用兄弟选择器-~-允许您选择其他元素的兄弟元素（例如，在层次结构中处于同一级别，但不一定紧挨着它）。CombinatorsSelectA,B匹配任意满足A（和/或）B的元素。AB匹配任意满足条件的元素：B是A的后代节点（B是A的子节点，或者A的子节点的子节点）A>B匹配任意元素，满足条件：B是A的直接子节点A+B匹配任意元素，满足条件：B是A的下一个兄弟节点（AB同父节点，B紧跟在后面A)A~B匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定在A的旁边）注：相邻兄弟选择器选择器而通用兄弟选择器只会选择“向后”，不会选择DOM结构前面的兄弟元素。这里有一个简单的例子来展示它们是如何工作的： Paragraph1 Paragraph2 第3段 第4段 元素——前两个 元素是 元素是 元素，它们是 元素，它们不是直接子元素）。所以只有前两个段落有一个黄色背景颜色。h2+p仅选择同一层次结构中 元素——在本例中为第一段和第三段。因此，文本全部为大写。h2~p选择与 元素——在这种情况下，所有匹配此条件的段落。因此，所有这些都具有虚线边框。属性选择器属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的一般语法由方括号([])组成，方括号包含属性名称，后跟可选条件以匹配属性的值。属性选择器根据它们如何匹配属性值可以分为两类：存在和值属性选择器和子字符串值属性选择器。Presence和value属性选择器这些属性选择器试图匹配准确的属性值：[attr]：该选择器选择所有包含attr属性的元素，而不考虑attr的值。[attr=val]：该选择器只选择其attr属性被赋值为val的所有元素。[attr~=val]：该选择器只选择attr属性的值中包含val值的所有元素（多个值用空格隔开），比如多个类中的一个类用空格隔开。子字符串值属性选择器这种情况下的属性选择器也被称为“伪正则选择器”，因为它们提供了类似于正则表达式的灵活匹配方法（但请注意，这些选择器并不是真正的正则表达式）：[attr|=val]:Selectattr属性值以val（包括val）或val-（-用于处理语言编码）开头的元素。[attr^=val]：选择attr属性值以val开头（包括val）的元素。[attr$=val]：选择attr属性值以val结尾（包括val）的元素。[attr*=val]：选择attr属性值包含字符串val的元素。伪类和伪元素伪类（Pseudo-class）CSS伪类（pseudo-class）是一个以冒号（:）为前缀的关键字，当你希望样式被渲染到指定元素时某些状态，可以在元素的选择器后面加上相应的伪类（pseudo-class）。你可能希望一个元素在某种状态下呈现另一种样式，例如当鼠标悬停在该元素上时，或者当一个复选框被禁用或选中时，或者当一个元素在DOM树中的第一个子元素时父元素的元素。:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited伪元素（Pseudo-element）和伪类它们相似，但又不同。它们都是关键字——但这次伪元素以两个冒号(::)为前缀——它们也添加在选择器之后以指定元素的一部分。::after::before::first-letter::first-line::selection::backdropHeading1
Heading2
元素之后直接连接的
元素处于同一级别（以及之后）的任何
