用[data-status]选择器通过dom属性控制svg图标显隐，核心是为图标容器设置对应data-status值并用css精确匹配；推荐visibility: hidden + opacity: 0组合实现过渡动画，避免display: none触发重排，同时确保状态值与类名严格一致、大小写敏感、优先级足够。

data-status 属性值直接控制 SVG 显示逻辑

用 [data-status] 选择器切换图标，本质是把状态映射到 DOM 属性上，再靠 CSS 控制子元素的 visibility 或 display。关键不是“切换图标”，而是“按需显示对应图标容器”。SVG 本身不参与状态判断，只是被包裹在带状态标识的父容器里。

• 必须给图标容器（如 <div class="icon">）加明确的 <code>data-status 值，比如 data-status="success"
• 每个状态需独立声明样式，不能只写通用规则；[data-status="error"] .icon-error 和 [data-status="success"] .icon-success 是两套互不干扰的规则
• 避免用 display: none 配合动画——它会触发重排，且无法过渡；改用 visibility: hidden + opacity: 0 更稳妥

为什么 visibility + opacity 比 display 更可靠

当需要过渡动画（比如淡入/缩放）时，display 是离散属性，无法被 transition 捕获。而 visibility 虽不可过渡，但配合 opacity 就能实现视觉上的渐变效果，且不会破坏文档流布局。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• visibility: hidden 保留占位，防止页面抖动；opacity: 0 让它视觉消失
• 过渡只需写在 opacity 上：transition: opacity 0.2s ease
• 切记：不要对 visibility 写 transition，否则无效；也不要只靠 opacity 而忽略 visibility，否则隐藏元素仍可能响应鼠标事件

data-status 值与 SVG 图标命名要严格一致

状态值不是随便起的字符串，它得和图标容器的类名或结构形成可预测的映射关系。否则维护时容易漏掉某一种状态的样式，导致图标不出现。

• 推荐统一前缀，比如所有状态图标都用 .icon--{status} 格式：.icon--loading、.icon--error
• CSS 中用属性选择器精确匹配：[data-status="loading"] .icon--loading → visibility: visible; opacity: 1;
• 未匹配的状态默认设为 visibility: hidden; opacity: 0;，避免遗漏时意外显示
• 如果状态值含空格或特殊字符（如 data-status="not ready"），CSS 里必须加引号：[data-status="not ready"]

动态更新 data-status 时注意 CSS 作用域泄漏

通过 JS 修改 element.dataset.status = "warning" 后，样式确实会立刻生效——但前提是该元素没被其他更具体的选择器覆盖，且没有继承自父级的冲突变量。

• 检查是否误用了全局 --icon-color 变量，而没在 [data-status] 规则里重置它
• 避免在父容器上设置 [data-status] { --icon-color: red; }，这会让所有后代都继承，哪怕它们自己有 data-status="success"
• 最安全的写法是限定作用域：[data-status] > .icon, [data-status] .icon--*，确保只影响直系图标
实际应用中，最容易被忽略的是状态值大小写一致性（"Success" ≠ "success"）和属性选择器优先级不足——比如某个高权重的 .component .icon 规则会压过 [data-status="error"] .icon-error，导致图标始终不显示。