交集选择器

概述

交集选择器是 CSS 中一种高级选择器,由两个或多个基本选择器组合而成,用于选择同时满足多个条件的元素。

语法

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

注意: 两个选择器之间没有空格,直接连写。

示例

1. 同时满足标签和类名

/* 选择所有 p 标签,并且类名为 box 的元素 */
p.box {
  color: red;
  font-size: 20px;
}

<p class="box">这个段落会被选中</p>
<div class="box">这个 div 不会被选中(不是 p 标签)</div>
<p>这个段落不会被选中(没有 box 类)</p>

2. 同时满足标签和 ID

/* 选择所有 div 标签,并且 ID 为 header 的元素 */
div#header {
  background-color: #333;
  color: white;
}

<div id="header">头部区域</div>
<div>普通区域</div>

3. 同时满足多个类名

/* 选择同时具有 box 和 active 类的元素 */
.box.active {
  border: 2px solid red;
}

<div class="box active">被选中</div>
<div class="box">不被选中</div>
<div class="active">不被选中</div>

特点

权重计算

交集选择器的权重是各组成部分权重之和:

p.box {
  /* 权重 = 1(标签) + 10(类) = 11 */
  color: red;
}

div#header {
  /* 权重 = 1(标签) + 100(ID) = 101 */
  background: blue;
}

常见应用场景

1. 特定元素的样式

/* 只针对带有 special 类的按钮 */
button.special {
  background: linear-gradient(to right, #ff6b6b, #ffa500);
  color: white;
}

2. 多状态组合

/* 元素同时具有 box 和 active 类时 */
.box.active {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

3. 表单元素控制

/* 禁用状态的输入框 */
input:disabled {
  background-color: #f5f5f5;
  color: #999;
}

/* 必填的输入框 */
input:required {
  border-color: red;
}

/* 禁用且必填的输入框 */
input:disabled:required {
  background-color: #ffeeee;
}

4. 精确的导航控制

/* 当前页面的导航项 */
nav a.current {
  background-color: #ff6700;
  color: white;
}

<nav>
  <a href="#">首页</a>
  <a href="#" class="current">产品</a>
  <a href="#">关于</a>
</nav>

注意事项

1. 避免过度使用

/* ❌ 不推荐: 过于具体,难以维护 */
div.content.box.main.active.special {}

/* ✅ 推荐: 使用更合理的类名 */
.highlight-box {}

2. ID 选择器慎用

/* ❌ 不推荐: ID 权重太高,难以覆盖 */
div#header.container {}

/* ✅ 推荐: 尽量使用类名 */
.header-container {}

3. 与后代选择器的区别

/* 交集选择器(无空格) - 同时满足两个条件 */
div.box {
  /* 选择同时是 div 标签且具有 box 类的元素 */
}

/* 后代选择器(有空格) - 包含关系 */
div .box {
  /* 选择 div 后代中所有具有 box 类的元素 */
}

实战案例

案例1: 特定列表样式

/* 只对有 highlight 类的 li 设置样式 */
li.highlight {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  padding-left: 15px;
}

<ul>
  <li>普通列表项</li>
  <li class="highlight">高亮列表项</li>
  <li>普通列表项</li>
</ul>

案例2: 按钮状态

/* 按钮 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 红色按钮 */
.btn.danger {
  background-color: #dc3545;
  color: white;
}

/* 红色按钮且禁用状态 */
.btn.danger:disabled {
  background-color: #a8323d;
  cursor: not-allowed;
}

<button class="btn danger">删除</button>
<button class="btn danger" disabled>禁用删除</button>

案例3: 卡片悬停效果

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.card.hovered {
  border-color: #ff6700;
  box-shadow: 0 10px 30px rgba(255,103,0,0.3);
  transform: translateY(-5px);
}

最佳实践

1. 合理使用: 用于需要精确控制的场景,不要滥用
2. 权重控制: 注意权重的累加,避免样式难以覆盖
3. 命名规范: 类名要有语义,便于理解和维护
4. 优先考虑类名: 相比标签+类名,优先使用多个类名的组合
5. 代码可读性: 复杂选择器要添加注释说明用途

总结

交集选择器是一种强大的选择器,能够精确选择满足多个条件的元素。理解其工作原理和权重计算,对于编写高质量的 CSS 代码非常重要。在实际开发中,要合理使用,避免过度复杂化。