并集选择器

概述

并集选择器(也称为群组选择器)可以同时选择多个选择器对应的元素,为它们设置相同的样式。

语法

选择器1, 选择器2, 选择器3 {
  属性: 值;
}

注意: 各选择器之间用英文逗号 , 分隔。

示例

1. 多个标签设置相同样式

/* 同时选中 h1、h2、h3,设置相同的字体 */
h1, h2, h3 {
  color: #333;
  font-family: Arial, sans-serif;
  margin-top: 20px;
}

2. 不同类名的元素

/* 同时选中多个类 */
.box, .container, .wrapper {
  padding: 20px;
  border-radius: 10px;
}

<div class="box">盒子</div>
<div class="container">容器</div>
<div class="wrapper">包装器</div>

3. 混合选择器

/* 可以混合各种类型的选择器 */
h1, .title, #main-header {
  text-align: center;
  color: blue;
}

4. 伪类和类组合

/* 鼠标悬停在链接和按钮上 */
a:hover, button:hover {
  color: red;
  cursor: pointer;
}

特点

权重计算

并集选择器中,每个选择器的权重是独立的,取最大的权重:

.box, #header {
  /* .box 权重 = 10 */
  /* #header 权重 = 100 */
  /* 整体权重 = 100(取最大值) */
  color: red;
}

/* 如果其他规则权重超过 100 才能覆盖 */
p.special {
  /* 权重 = 1 + 10 = 11 */
  color: blue; /* 不会覆盖上面的红色 */
}

常见应用场景

1. 标题统一样式

/* 统一所有标题的样式 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.4;
}

h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }

2. 清除默认样式

/* 去除列表默认样式 */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 去除链接默认样式 */
a, a:link, a:visited {
  text-decoration: none;
  color: inherit;
}

3. 表单元素统一

/* 所有输入框统一样式 */
input, textarea, select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

4. 按钮组样式

/* 按钮和链接按钮统一样式 */
button, .btn, a.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}

5. 交互状态

/* 悬停和焦点状态 */
a:hover, button:hover, input:focus {
  outline: none;
  border-color: #4a90e2;
}

6. 辅助类

/* 文本对齐辅助类 */
.text-left, .text-start {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right, .text-end {
  text-align: right;
}

实战案例

案例1: 网站重置样式

/* 通配符选择器 + 常用标签 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

案例2: 卡片组件样式

/* 统一卡片的基础样式 */
.card, .news-item, .product-box {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 卡片标题 */
.card-title, .news-title, .product-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

案例3: 响应式媒体查询

/* 小屏幕设备 */
@media (max-width: 768px) {
  .container, .main, .sidebar {
    width: 100%;
    padding: 0 15px;
  }

  .menu, .nav-bar, .header-nav {
    display: none;
  }
}

案例4: 表格样式

/* 表格相关元素 */
table, th, td {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
}

/* 隔行变色 */
tr:nth-child(even), tr:hover {
  background-color: #f8f9fa;
}

案例5: 动画过渡

/* 为多个元素添加过渡效果 */
.button, .card, .nav-item, .menu-item {
  transition: all 0.3s ease;
}

/* 悬停效果 */
.button:hover, .card:hover, .nav-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

优点

1. 代码简洁: 避免重复代码
2. 易于维护: 修改一处即可影响多个元素
3. 提高效率: 减少代码量
4. 一致性: 确保相关元素样式一致

注意事项

1. 避免过度使用

/* ❌ 不推荐: 选择器太多,难以维护 */
h1, h2, h3, h4, h5, h6, .title, .heading, .headline {
  /* ... */
}

/* ✅ 推荐: 使用通配符或更合理的方式 */
h1, h2, h3, h4, h5, h6 {
  /* ... */
}

2. 保持可读性

/* ✅ 推荐: 每行一个选择器 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

/* ✅ 推荐: 相关选择器放在一起 */
.btn-primary,
.btn-success,
.btn-danger {
  padding: 10px 20px;
}

3. 注意选择器顺序

/* 如果有冲突,后面的会覆盖前面的 */
p, .text {
  color: black;
}

.text {
  color: blue; /* 会覆盖上面的黑色 */
}

4. 与后代选择器配合

/* 可以与后代选择器配合使用 */
.box p, .container h2, .wrapper span {
  line-height: 1.6;
}

与交集选择器的区别

/* 交集选择器: 选择既是 p 标签又有 box 类的元素 */
p.box {
  color: red;
}

/* 并集选择器: 选择所有 p 标签或所有 box 类的元素 */
p, .box {
  color: blue;
}

实际开发建议

1. CSS Reset: 使用并集选择器进行样式重置
2. 框架开发: 为多个组件设置统一样式
3. 主题系统: 为相关元素设置统一的主题颜色
4. 响应式: 在媒体查询中批量调整样式
5. 动画效果: 为多个元素添加相同的过渡效果

总结

并集选择器是 CSS 中非常实用的选择器,能够高效地为多个元素设置相同的样式。合理使用并集选择器可以大大减少代码量,提高开发效率,同时保持代码的可维护性。在实际开发中,要结合项目需求,灵活运用。