学习

通配符选择器

2026-02-23/0/ 编辑

通配符选择器

什么是通配符选择器

通配符选择器(*)选择页面上的所有元素。

语法

* {
  属性名1: 属性值1;
  属性名2: 属性值2;
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>通配符选择器</title>
  <style>
    /* 选择所有元素,去掉默认边距 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <h1>标题</h1>
  <p>段落</p>
  <div>盒子</div>
</body>
</html>

特点

1. 选择所有元素

通配符选择器会选择 HTML 文档中的所有元素。

<style>
  * {
    color: red;
  }
</style>
<body>
  <h1>标题(红色)</h1>
  <p>段落(红色)</p>
  <div>盒子(红色)</div>
  <span>文本(红色)</span>
</body>

2. 优先级最低

通配符选择器的优先级为 0,是所有选择器中最低的。

/* 优先级: 0 */
* {
  color: red;  /* 被覆盖 */
}

/* 优先级: 1 */
div {
  color: blue;  /* 生效 */
}

3. 影响性能

通配符选择器会影响 CSS 解析性能,应谨慎使用。

常见用法

1. 样式重置

最常用的场景是作为样式重置的基础。

/* 通用样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 统一盒模型

/* 统一使用 border-box */
* {
  box-sizing: border-box;
}

3. 设置默认字体

* {
  font-family: Arial, sans-serif;
}

4. 去掉列表样式

ul, ol {
  list-style: none;
}

后代通配符选择器

通配符选择器可以与后代选择器组合使用。

语法

父元素 * {
  /* 选择父元素下的所有后代元素 */
}

示例

<style>
  /* 选择 .container 内的所有元素 */
  .container * {
    border: 1px solid #ddd;
  }
</style>
<body>
  <div class="container">
    <h1>标题</h1>
    <p>段落</p>
    <div>盒子</div>
  </div>
</body>

伪类组合

<style>
  /* 选择所有获得焦点的元素 */
  *:focus {
    outline: 2px solid blue;
  }

  /* 选择所有悬停的元素 */
  *:hover {
    cursor: pointer;
  }
</style>

实际应用

应用1: 完整样式重置

/* 通用样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML5 语义化标签重置 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

/* 列表样式重置 */
ul, ol {
  list-style: none;
}

/* 图片样式 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 链接样式 */
a {
  text-decoration: none;
  color: inherit;
}

应用2: 统一字体

* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

应用3: 布局容器

<style>
  /* 容器内的所有元素 */
  .container * {
    box-sizing: border-box;
  }

  /* 特定区域的所有元素 */
  #main * {
    margin: 0;
    padding: 0;
  }
</style>

应用4: 调试样式

<style>
  /* 调试: 给所有元素添加边框 */
  * {
    border: 1px solid red;
  }

  /* 调试: 给所有元素添加背景色 */
  * {
    background-color: rgba(255, 0, 0, 0.1);
  }
</style>

性能影响

性能问题

通配符选择器会影响 CSS 解析性能,特别是在大型项目中。

优化建议

1. 避免过度使用

/* 不推荐: 频繁使用通配符选择器 */
* {
  color: red;
}

*::before,
*::after {
  content: '';
}

2. 使用具体选择器

/* 推荐: 使用具体选择器 */
body {
  font-family: Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

3. 限制作用范围

/* 推荐: 限制在特定容器内 */
.container * {
  box-sizing: border-box;
}

/* 不推荐: 作用范围太大 */
* {
  box-sizing: border-box;
}

与其他选择器对比

选择器	语法	选择范围	优先级	性能
通配符选择器	`*`	所有元素	0	差
标签选择器	`div`	所有 div 元素	1	中
类选择器	`.class`	所有 class 元素	10	好
ID 选择器	`#id`	唯一元素	100	最好

优缺点

优点

简单直接: 语法简单,易于理解
全局生效: 一次性选择所有元素
样式重置: 适合作为样式重置的基础

缺点

优先级最低: 容易被其他选择器覆盖
性能影响: 影响页面渲染性能
作用范围大: 可能影响不需要的元素
缺乏语义: 不够精确,容易产生意外影响

最佳实践

1. 只用于样式重置

/* 推荐: 仅用于样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 避免用于具体样式

/* 不推荐: 用于具体样式 */
* {
  color: red;
  font-size: 14px;
}

/* 推荐: 使用具体选择器 */
body {
  color: #333;
  font-size: 14px;
}

3. 限制作用范围

/* 推荐: 限制在特定容器内 */
.container * {
  box-sizing: border-box;
}

4. 与其他选择器配合

/* 通用重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 具体元素的样式 */
h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  line-height: 1.5;
}

常见错误

1. 过度使用

/* 不推荐 */
* {
  color: red;
  background-color: white;
  font-size: 14px;
  padding: 10px;
  margin: 10px;
}

2. 与其他选择器冲突

/* 通配符选择器 */
* {
  margin: 0;
}

/* 特殊元素需要 margin */
.header {
  margin-top: 20px;
}

3. 忽略性能影响

/* 不推荐: 在大型项目中频繁使用 */
* {
  /* 复杂样式 */
}

学习要点

语法: * { },选择所有元素
优先级: 最低,为 0
性能: 影响页面渲染性能
用途: 主要用于样式重置
后代: 可以与后代选择器组合使用
最佳实践: 只用于样式重置,避免过度使用
优化: 限制作用范围,使用具体选择器

css css学习