选择器是 CSS 规则的一部分且位于 CSS 声明块前。

选择器可以被分为以下类别：

• 简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。
• 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
  • [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
  • [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
  • [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
  • [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
  • [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
  • [attr*=val] : 选择attr属性的值中包含字符串val的元素。
• 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM 树中一父节点的第一个子节点。
  • p:first-of-type : 选择其父元素的第一个p元素
  • p:last-of-type : 选择其父元素的最后一个p元素
  • p:only-of-type : 选择其父元素的唯一一个p元素
  • p:nth-of-type(n) : 选择其父元素的第n个p元素
  • p:nth-last-of-type(n) : 同上，从后开始计数
  • .box:nth-child(2) : 选择其父元素的第二个.box元素
  • .box:nth-last-child(2) : 同上，从后开始计数
  • p:last-child : 选择位于其父元素最后一个元素的所有p元素
  • :root : 根元素
  • :empty : 没有子元素的元素
  • :enable : 每一个启用的元素
  • :disable : 每一个禁用的元素
  • :checked : 每一个被选中的元素
  • :not(selector) : 每一个非selector的元素
  • ::section : 被用户选取的元素部分
• 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
• 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择 divs 的直系子节点的段落，或者直接跟在 headings 后面的段落。
  • 后代选择器——（空格键）——允许您选择嵌套在另一个元素中的某个元素（不一定是直接的后代;例如，它可以是一个孙子）。
  • 子选择器—— > ——允许您选择一个元素，该元素是另一个元素的直接子元素。
  • 相邻兄弟选择器—— + ——允许您选择一个元素，它是另一个元素的直接兄弟元素(也就是说，在它的旁边，在层次结构的同一层)。
  • 通用兄弟选择器—— ~ — —允许您选择其他元素的兄弟元素(例如，在层次结构中的相同级别，但不一定就在它的旁边)。

注：相邻兄弟选择器和通用兄弟选择器只会“向后”选择，DOM结构靠前的兄弟元素不在选择范围内。

• 多用选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个 CSS 规则下面， 以将一组声明应用于由这些选择器选择的所有元素。