使用相邻或通用兄弟选择器可控制禁用元素后的span样式，如input:disabled ~ .tip显示提示；但受限于元素类型和DOM顺序，推荐通过父容器添加状态类（如.field-group.disabled）来稳定实现禁用状态下的提示信息展示，确保用户可读性和样式可控性。
当使用 :disabled 的元素后面紧跟一个 span，想通过 CSS 控制其样式以显示附加提示信息时，可以利用相邻兄弟选择器（+）或通用兄弟选择器（~）。但由于 :disabled 是伪类，不能直接作为选择器的主语作用于非表单元素，因此需注意结构和用法。
理解 ~ 选择器与 :disabled 的限制
:disabled ~ span 表示：被禁用的元素之后的所有同级 span。但前提是该禁用元素必须是可禁用的表单控件（如 input、button 等），且 span 位于其后。
例如：
<input type="text" disabled> <span class="tip">此功能已禁用</span>
此时可用：
立即学习“前端免费学习笔记（深入）”；
input:disabled ~ .tip { display: inline; color: #666; font-size: 12px; margin-left: 8px; }实现禁用状态下的提示信息显示
为了让用户在元素禁用时仍能看到说明，可通过以下方式设置视觉反馈：
- 将提示
span放在禁用元素之后 - 默认隐藏提示，仅在前面元素禁用时显示
- 使用浅色文字或图标增强可读性
示例 CSS：
.tip { display: none; font-size: 12px; color: #999; } input:disabled ~ .tip { display: inline-block; }更可靠的方案：包装容器控制状态
由于浏览器对 :disabled ~ 的支持依赖 DOM 顺序和元素类型，推荐使用父容器添加状态类更稳定。
结构示例：
<div class="field-group disabled"> <input type="text" disabled> <span class="tip">当前不可编辑，请联系管理员</span> </div>
CSS 样式：
.field-group.disabled .tip { display: block; color: #777; font-style: italic; margin-top: 4px; }这样不依赖相邻关系，也便于 JavaScript 动态控制。
基本上就这些，关键是结构合理、样式明确，确保禁用状态下用户依然能获取必要信息。
