在前端表单开发中，经常会遇到这样的需求：用户选中某个单选按钮后，页面自动展示该选项对应的文本说明，不需要额外的JavaScript逻辑。其实通过CSS的:checked伪类和相邻选择器，就能轻松实现这个效果。
实现核心原理
要实现单选按钮选中后显示文本，核心依赖两个CSS特性：
:checked伪类：用于匹配被选中的单选按钮、复选框等表单元素- 相邻兄弟选择器
+或者通用兄弟选择器~：用于选中选中状态按钮后面的对应文本元素
基本思路是：先把需要显示的文本默认隐藏，当单选按钮被选中时，通过兄弟选择器找到对应的文本元素，将其设置为显示状态。
完整实现示例
下面是一个完整的可运行示例，包含三个单选选项，选中不同选项会显示对应的提示文本：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS单选按钮选中显示文本</title>
<style>
/* 默认隐藏所有提示文本 */
.tip-text {
display: none;
margin-top: 10px;
color: #666;
font-size: 14px;
}
/* 单选按钮被选中时，显示后面的相邻提示文本 */
input[type="radio"]:checked + .tip-text {
display: block;
}
/* 单选按钮组样式 */
.radio-group {
margin-bottom: 15px;
}
label {
margin-right: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>请选择你的支付方式</h3>
<div class="radio-group">
<label>
<input type="radio" name="pay" value="wechat">
微信支付
</label>
<span class="tip-text">微信支付支持扫码付款，实时到账</span>
</div>
<div class="radio-group">
<label>
<input type="radio" name="pay" value="alipay">
支付宝支付
</label>
<span class="tip-text">支付宝支付支持花呗分期，无手续费</span>
</div>
<div class="radio-group">
<label>
<input type="radio" name="pay" value="card">
银行卡支付
</label>
<span class="tip-text">银行卡支付需要输入卡号，支持大部分主流银行</span>
</div>
</body>
</html>代码关键点说明
上面的示例中，有几个需要注意的细节：
- 所有单选按钮的
name属性保持一致，保证同一时间只能选中一个选项 - 提示文本
.tip-text是单选按钮的相邻兄弟元素，所以使用+相邻兄弟选择器就能匹配到 - 如果提示文本和单选按钮之间有其他元素间隔，可以把
+换成~通用兄弟选择器，只要两者在同一个父容器下即可
扩展场景适配
如果需要在选中单选按钮后，显示不在同一父容器下的文本，也可以通过调整选择器的层级实现。比如下面的示例，选中单选按钮后显示页面其他位置的提示区域：
/* 隐藏全局提示区域 */
#global-tip {
display: none;
}
/* 选中对应单选按钮时显示全局提示 */
#radio-option1:checked ~ #global-tip {
display: block;
}这种方式完全不需要JavaScript参与，减少了页面的脚本依赖，在简单场景下能有效提升页面加载和渲染性能，也避免了JS事件监听可能带来的兼容性问题。
CSS单选按钮display属性:checked伪类隐藏文本修改时间：2026-06-02 04:17:13