在网页设计领域，选择器是CSS（层叠样式表）中用于挑选HTML（超文本标记语言）元素以应用特定样式规则的关键组成部分。简单说，CSS选择器是CSS中用来指定要设置样式的HTML元素的模式。选择器告诉浏览器哪些HTML元素应该应用特定的CSS规则。以下是几种主要的选择器类型及其用法：

一、通用选择器（*通配符选择器）

通用选择器能够匹配页面上的所有HTML元素，不论其类型、类或ID。这一强大的工具常用于设置全局样式。

* {
  color: hotpink; /* 将所有文本颜色设置为亮粉红色 */
}
二、类型选择器

类型选择器直接基于HTML元素的标签名进行匹配。这种选择器非常适合为特定类型的元素设置基本样式。

section {
  padding: 2em; /* 为所有 section 元素添加内边距 */
}
三、类选择器

类选择器允许为拥有特定class属性的元素应用样式。同一个元素可以应用多个类，从而实现多样化的样式组合。

定义与语法

  • 语法形式：以点（.）开头，后跟类名，如 .class-name { 属性: 值; } 。

  • 作用：选择页面中所有带有指定class属性的HTML元素。

主要特点

  • 可复用性：同一个类可以应用到多个不同类型的元素上，实现样式复用。

  • 多类共存：一个HTML元素可以同时拥有多个类名（空格分隔）。

  • 语义明确：类名可以描述元素的用途或样式特征，增强代码可读性。

  • 优先级：优先级高于元素选择器，但低于ID选择器。

<style>
    .my-class {
       color: red; /* 将拥有 my-class 类的元素文本颜色设置为红色 */
    }
</style>

<div class="my-class">text</div>
四、ID选择器
定义与语法

  • 语法形式：以井号（#）开头，后跟ID名称，如 #id-name { 属性: 值; }。

  • 作用：选择页面中带有指定ID属性的HTML元素。

主要特点

  • 唯一性：在一个HTML文档中，ID属性的值应该是唯一的，不能重复使用。

  • 高优先级：ID选择器的优先级高于类选择器（.）和元素选择器。

  • 精确选择：通常用于选择页面中特定的、唯一的元素。

  • JavaScript交互：ID属性常被JavaScript用于通过getElementById()方法选择元素。

注意：ID名称不能以数字开头，且应遵循HTML命名规范。

<style>
     #rad {
       border: 1px solid blue; /* 为ID为 rad 的元素添加蓝色边框 */
     }
</style>

<div id="rad"></div>
五、属性选择器

属性选择器允许根据元素的属性及其值来选取元素。这种灵活性使得针对特定属性进行样式定制成为可能。

定义与语法

  • 基本语法：使用方括号 [] 包围属性名和可选的属性值条件。

<style>
     [data-type='primary'] {
          color: red; /* 选择 data-type 属性值为 primary 的元素并设置文本颜色为红色 */
     }

     [data-type] {
          color: red; /* 选择所有具有 data-type 属性的元素，无论其值是什么 */
     }
</style>

<div data-type="primary"></div>

属性选择器还可以结合大小写敏感性运算符：

  • s：区分大小写。

  • i：不区分大小写。

[data-type='primary' s] {
  color: red; /* 区分大小写匹配 data-type 属性值为 primary 的元素 */
}

[data-type='primary' i] {
  color: red; /* 不区分大小写匹配 data-type 属性值为 primary 的元素 */
}

此外，属性选择器支持多种匹配模式：

  • [attr]：元素具有名为attr的属性。

  • [attr=value]：元素具有名为attr的属性，且其值为value。

  • [attr~=value]：元素具有名为attr的属性，其值是一个空格分隔的值列表，其中至少有一个值为value。

  • [attr|=value]：元素具有名为attr的属性，其值为value，或者以value-（连字符）为前缀。

  • [attr^=value]：元素具有名为attr的属性，其值以value开头。

  • [attr$=value]：元素具有名为attr的属性，其值以value结尾。

  • [attr*=value]：元素具有名为attr的属性，其值包含value。

button[class~=primary] {
  color: #008F51; /* 选择 class 属性值中包含 primary 的 button 元素 */
  font-size: 3em;
}
六、分组选择器

CSS中的分组选择器（Group Selector）是一种允许同时对多个选择器应用相同样式规则的选择器组合方式。它通过使用逗号（,）作为分隔符，将多个独立的选择器组合在一起，从而减少代码重复，提高CSS的简洁性和维护性。

定义与语法

  • 语法形式：选择器1, 选择器2, 选择器3 { 属性: 值; }。

  • 作用：同时对多个不同的选择器应用相同的样式规则。

  • 组合灵活：可以组合任何类型的选择器（元素、类、ID、属性等）。

strong, em,.my-class, [lang] {
  color: red; /* 将 strong、em、拥有 my-class 类以及具有 lang 属性的元素文本颜色设置为红色 */
}
七、相邻兄弟选择器（E + E）

  1. 仅选择紧接在指定元素(E)之后第一个兄弟元素(E)，如果有多个相邻的元素(E)，则除了相邻第一个元素外，其它的相邻元素(E)都会被选择。

  2. 即 至少有两个相同名称的相邻元素，相邻兄弟选择器才有效。

<style>
    .article > p + p {
       color: orange;
       font-weight: 800;
       font-size: 2em;
    }
</style>

<article class="article">
    <p>这是第一个段落。</p>
    <div>这是其它内容</div>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <p>这是第四个段落。</p>
 </article>

结果：”<p>这是第三个段落。</p> <p>这是第四个段落。</p> “ 被选择。

八、同胞选择器（E ~ F）

用于选择E元素的所有后续兄弟元素F，即不管后续兄弟元素是同名元素或不同名元素，元素(E)的所有后续元素(同名或不同名)都会被选择。

<style>
    .article2 > p ~ p {
        color: orange;
        font-weight: 800;
        font-size: 2em;
    }
</style>

<article class="article2">
    <p>这是第一个段落2。</p>
    <div>这是其它内容2</div>
    <p>这是第二个段落2。</p>
    <p>这是第三个段落2。</p>
    <p>这是第四个段落2。</p>
</article>

结果：“<p>这是第二个段落2。</p><p>这是第三个段落2。</p> <p>这是第四个段落2。</p>” 被选择。

其它示例：

.post > * + * { margin-top: 1em; }

.post类下的每个子元素，除了第一个元素之外，每个元素的上边距都设置为1em。这通常用于在帖子或文章的内容中添加间距，使得每个段落或元素之间有一定的空间分隔，和 .post > *:not(:first-child) 作用相同。

九、伪类

CSS中的伪类（Pseudo-class）是一种特殊的关键字，用于选择元素的特定状态或位置，这些状态或位置无法通过HTML的class、ID或其他属性直接表示。伪类允许开发者为元素在特定时刻或特定条件下应用不同的样式。简单说，伪类用于描述元素的特殊状态，如鼠标悬停、焦点、活动链接等。这些状态通常不是由文档树中的元素结构决定的，而是由用户与页面的交互行为触发的。

定义与语法

  • 语法形式：使用冒号（:）后跟伪类名称，如 选择器:伪类 { 属性: 值; }。

  • 作用：选择元素的特定状态、位置或关系。

常见伪类分类与示例

9.1 动态伪类：基于用户交互状态

  • :hover - 鼠标悬停在元素上时

  • :active - 元素被激活（按下）时

  • :focus - 元素获得焦点时

  • :link - 未访问的链接

  • :visited - 已访问的链接

a:hover { color: red; }

button:active { background-color: #333; }

input:focus { border: 2px solid blue; }

9.2 结构伪类：基于元素在DOM树中的位置

  • :first-child - 元素是其父元素的第一个子元素

  • :last-child - 元素是其父元素的最后一个子元素

  • :nth-child(n) - 元素是其父元素的第n个子元素

  • :only-child - 元素是其父元素的唯一子元素

p:first-child { font-weight: bold; }

li:nth-child(odd) { background-color: #f0f0f0; }

9.3 表单伪类：基于表单元素的状态

  • :checked - 选中的单选框或复选框

  • :disabled - 禁用的表单元素

  • :enabled - 可用的表单元素

  • :required - 必填的表单元素

input:checked + label { color: green; }

input:disabled { background-color: #eee; }

9.4 目标伪类：基于URL片段

  • :target - 匹配当前URL片段（锚点）指向的元素

#section1:target { background-color: #ffe8c9; }

9.5 语言伪类：基于元素的语言属性

  • :lang(language) - 匹配指定语言的元素

p:lang(fr) { font-style: italic; }

9.6 :is() 和 :where()

:is() 和 :where() 是 CSS Selectors Level 4 中引入的函数式伪类，它们的主要功能是简化选择器列表的写法，但在优先级处理上存在关键差异。

9.6.1 相同点

  • 功能一致：两者都接受一个选择器列表作为参数，匹配列表中任一选择器 能匹配的元素。以下两种写法效果相同：

/* 传统写法 */
.header h1, .header h2, .header h3 { color: red; }

/* 使用 :is() 或 :where() 简化 */
.header :is(h1, h2, h3) { color: red; }
.header :where(h1, h2, h3) { color: red; }

  • 语法结构：均为函数式伪类，语法形式为 :is(selector1, selector2, ...) 和 :where(selector1, selector2, ...)。  

9.6.2 不同点

  • 核心差异：优先级（Specificity）计算规则不同

伪类

优先级计算规则

:is()

优先级由其参数列表中优先级最高的选择器决定

:where()

优先级始终为 0（不影响整个选择器的优先级）

9.6.3 具体示例说明优先级差异

假设我们有以下 HTML 结构：

<div class="container">
  <h1 class="title">标题</h1>
</div>

场景1：使用 :is()

/* 优先级：.container（0,1,0） + :is(.title)（0,1,0）= 0,2,0 */
.container :is(.title) {
  color: blue;
}

/* 优先级：.title（0,1,0） */
.title {
  color: red;
}

结果：文本为 蓝色（因为 :is(.title) 的优先级是 0,1,0，导致整体优先级更高）。

场景2：使用 :where()

/* 优先级：.container（0,1,0） + :where(.title)（0,0,0）= 0,1,0 */
.container :where(.title) {
  color: blue;
}

/* 优先级：.title（0,1,0） */
.title {
  color: red;
}

结果：文本为 红色（因为 :where(.title) 优先级为 0，整体优先级与 .title 相同，但后者定义在后面，按 CSS 层叠规则覆盖）。

9.6.4 使用场景总结

  • :is() ：适合需要继承内部选择器优先级的场景（例如，希望保持原选择器的优先级逻辑）。  

  • :where()：适合不希望影响优先级的场景（例如，编写通用样式库、主题切换，避免优先级过高导致难以覆盖）。

9.7 注意事项

  • 伪类不是真实的HTML元素，而是表示元素的某种状态或关系。

  • 多个伪类可以组合使用，但需要注意顺序（某些伪类的顺序会影响优先级）。

  • 部分伪类（如:nth-child()）接受参数，可以实现更复杂的选择逻辑

十、伪元素

伪元素允许在文档中插入虚拟的元素，从而可以通过CSS来样式化这些虚拟元素的内容或位置。这为设计师提供了一种在不改变HTML结构的情况下增强页面视觉效果的手段。

其实，伪元素本质上是在元素的特定位置或部分生成额外的内容或样式层，它允许开发者在不修改HTML结构的情况下，对元素的特定区域进行精确控制。

语法形式：

CSS3中，伪元素使用双冒号（::）表示，以区分伪类（单冒号:）。

注意：CSS1和CSS2中伪元素使用单冒号，现代浏览器仍支持这种写法以保持兼容性，但建议使用双冒号以符合CSS3标准。

.my-element::before {
   content: 'Prefix - '; /* 在 my-element 类的元素前插入文本 'Prefix - '/
}

li::marker {
   color: red; /* 将列表项的标记（项目符号或编号）设置为红色 */
}

::selection {
   background: black; /* 当用户选中页面中的文本时，将选中文本的背景色设置为黑色 */
   color: white;
}

主要伪元素类型及示例

10.1 ::before 和 ::after

在元素内容的前面或后面插入虚拟内容（通常需要配合 content 属性使用）。

<style>
    .quote::before {
       content: """;
       color: #f00;
       font-size: 2em;
    }

    .quote::after {
       content: """;
       color: #f00;
       font-size: 2em;
    }
</style>
<div class="quote">这是一段引用</div>

10.2 ::first-line

选择元素文本内容的第一行。

p::first-line {
  color: blue;
  font-weight: bold;
}

10.3 ::first-letter

选择元素文本内容的第一个字符。

h1::first-letter {
  font-size: 2em;
  color: red;
  float: left;
  margin-right: 5px;
}

10.4 ::selection

选择用户通过鼠标或其他输入设备选中的文本部分。

::selection {
  background-color: yellow;
  color: black;
}

/* Firefox兼容写法 */
::-moz-selection {
  background-color: yellow;
  color: black;
}

10.5 ::placeholder

选择输入框（如 input、textarea）的占位符文本。

input::placeholder {
  color: #999;
  font-style: italic;
}

 10.6 伪元素的特点与优势

  1. 不修改HTML结构：无需添加额外的HTML标签，保持文档结构的简洁性。

  2. 内容生成能力：通过 content 属性可以生成文本、符号或其他内容（::before和::after）。

  3. 精确控制：可以针对元素的特定部分（如首字母、首行、选中内容等）应用样式。

  4. 装饰性强：常用于添加装饰性元素（如引号、分隔线、图标等），提升视觉效果。

  5. 伪元素是行内元素：默认情况下，伪元素是行内元素，但可以通过 display 属性修改为块级元素等。

使用注意事项

  • ::before 和 ::after 必须配合 content 属性使用（即使 content: "" ），否则不会生效。

  • 伪元素属于元素的一部分，继承元素的样式，但也可以单独设置样式。

  • 伪元素不能被选择或直接交互（特殊情况如 ::selection 除外）。

  • 部分伪元素（如 ::placeholder ）需要特定浏览器前缀以确保兼容性。

总结

熟练掌握并深入理解CSS选择器的各类用法，包括元素选择器、类选择器、ID选择器、属性选择器以及伪类和伪元素选择器，不仅能够精准地定位页面中的目标元素，还能使样式应用更加灵活高效。

在日常前端开发工作中，合理运用复杂选择器组合可以减少冗余的HTML类名，降低代码耦合度，增强样式的可维护性。同时，高质量的选择器编写习惯有助于提升页面渲染性能，避免过度层叠与权重冲突，从而显著提高开发效率与整体代码质量，为构建结构清晰、风格统一的现代化网页应用奠定坚实基础。

彩蛋

本文于 Cnb 平台完整呈现了 CSS 选择器的示例代码，欢迎前往阅读《CSS 伪类函数 is:() 和 :where()》以获取详尽内容。