使用'saved'/'removed'类时按钮样式无法正常显示的问题排查

AI 小北

2026-7-3

问题：切换按钮图标样式不生效的排查与修复

我希望通过saved和removed两个类来切换按钮的图标，已按如下方式定义样式，但仅使用saved或removed类时样式无法正确显示，找不到原因，恳请指导。

现有代码

HTML代码（原标注为index.js）

<button class="icon-btn has-state saved" aria-label="Add to saved recipes">
<span class="material-symbols-outlined bookmark-add" aria-hidden="true" >bookmark_add</span>
<span class="material-symbols-outlined bookmark-add" aria-hidden="true" >bookmark</span>
</button>

style.css

.has-state {
  position: relative;
  overflow: hidden;
}

.has-state::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: var(--transition-short);
}

.has-state:where(:hover, :focus-visible):not(:active)::after {
  background-color: var(--alpha-10);
}

.material-symbols-outlined {
  display: block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.saved .bookmark-add,
.removed .bookmark {
  display: none;
}

.saved .bookmark {
  font-variation-settings: "FILL" 1;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background-color: var(--primary-container);
  border-radius: var(--radius-circle);
}

问题根源与修复方案

核心问题是HTML中第二个span的类名写错了：
你给显示bookmark图标的span加了bookmark-add类，但CSS里的选择器是.saved .bookmark，根本匹配不到这个元素，导致隐藏和填充样式都无法生效。

修复后的HTML代码

<button class="icon-btn has-state saved" aria-label="Add to saved recipes">
<span class="material-symbols-outlined bookmark-add" aria-hidden="true" >bookmark_add</span>
<span class="material-symbols-outlined bookmark" aria-hidden="true" >bookmark</span>
</button>