在网页交互设计中，标签激活效果是非常常见的需求，比如点击选项卡切换内容、勾选复选框触发相邻提示显示等场景，都可以通过CSS选择器直接实现，不需要依赖JavaScript代码。核心是利用CSS伪类和兄弟选择器来匹配激活状态的标签以及其相邻的元素，从而修改对应的样式。
核心CSS选择器介绍
1. 状态伪类选择器
状态伪类用于匹配处于特定状态的标签，常见的有:checked，可以匹配被选中状态的单选框<input type="radio">、复选框<input type="checkbox">以及<select>中的<option>元素。当标签处于激活选中状态时，该伪类就会生效。
2. 相邻兄弟选择器（+）
相邻兄弟选择器的语法是元素A + 元素B，表示选择紧接在元素A之后的第一个兄弟元素B，且元素A和元素B需要有相同的父元素。如果元素A处于特定状态，就可以用这个选择器修改紧邻它的下一个元素的样式。
3. 通用兄弟选择器（~）
通用兄弟选择器的语法是元素A ~ 元素B，表示选择在元素A之后的所有兄弟元素B，同样要求元素A和元素B有相同的父元素。如果需要修改激活标签后面多个相邻元素的样式，就可以使用这个选择器。
实现标签激活并修改相邻元素的示例
示例1：单选选项卡切换内容
下面实现一个点击不同选项卡，激活当前选项卡，同时显示对应内容区域的效果，内容区域是选项卡的相邻元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 隐藏所有单选框 */
.tab-input {
display: none;
}
/* 选项卡标签样式 */
.tab-label {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
cursor: pointer;
margin-right: 5px;
}
/* 内容区域样式，默认隐藏 */
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
margin-top: 10px;
}
/* 当单选框被选中时，修改对应标签的样式（激活效果） */
.tab-input:checked + .tab-label {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
/* 当单选框被选中时，显示对应的相邻内容区域 */
.tab-input:checked + .tab-label + .tab-content {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<input type="radio" id="tab1" name="tab" class="tab-input" checked>
<label for="tab1" class="tab-label">选项卡1</label>
<div class="tab-content">
这是第一个选项卡对应的内容
</div>
<input type="radio" id="tab2" name="tab" class="tab-input">
<label for="tab2" class="tab-label">选项卡2</label>
<div class="tab-content">
这是第二个选项卡对应的内容
</div>
<input type="radio" id="tab3" name="tab" class="tab-input">
<label for="tab3" class="tab-label">选项卡3</label>
<div class="tab-content">
这是第三个选项卡对应的内容
</div>
</div>
</body>
</html>
在这个示例中，.tab-input:checked + .tab-label实现了选中单选框时，修改紧邻的label标签样式，形成激活效果；.tab-input:checked + .tab-label + .tab-content则通过两次相邻兄弟选择器，找到激活标签后面的内容区域并显示，实现了切换效果。
示例2：复选框触发多个相邻元素样式修改
如果需要勾选复选框后，修改后面多个相邻元素的样式，可以使用通用兄弟选择器~。
/* 复选框样式 */
.checkbox-input {
margin-right: 10px;
}
/* 相邻提示元素默认样式 */
.tip-text {
color: #999;
font-size: 14px;
margin-left: 25px;
display: none;
}
/* 复选框被选中时，修改后面所有tip-text的样式 */
.checkbox-input:checked ~ .tip-text {
display: block;
color: #28a745;
}
<div class="checkbox-container">
<input type="checkbox" id="agree" class="checkbox-input">
<label for="agree">我同意用户协议</label>
<p class="tip-text">提示1：请仔细阅读协议内容</p>
<p class="tip-text">提示2：勾选后才可以继续操作</p>
<p class="tip-text">提示3：协议内容不可修改</p>
</div>
这里勾选复选框后，.checkbox-input:checked ~ .tip-text会匹配复选框后面所有的tip-text元素，统一修改它们的显示状态和颜色，实现了一次激活修改多个相邻元素的效果。
注意事项
- 兄弟选择器只能选择后面的元素，不能选择前面的元素，如果需要修改前面的元素样式，需要调整DOM结构顺序。
- 使用
:checked伪类时，需要确保标签是支持该状态的元素，普通div标签无法使用该伪类，需要结合表单元素或者自定义属性来实现。 - 如果相邻元素之间有其他的无关元素，相邻兄弟选择器+会失效，这时候需要改用通用兄弟选择器~，或者调整DOM结构保证元素相邻。