如何通过CSS切换复选框选中/未选中状态的Material Icons图标？

嘿，我来帮你搞定这个问题～你的CSS选择器之所以没生效，是因为没匹配到正确的DOM结构，咱们一步步来修正：

问题根源分析 #

你的HTML结构里，复选框的直接兄弟是.label-text，而图标在这个span内部的第二个span里的<i>标签中。你原来的选择器用了太多相邻兄弟选择器（+），但这些嵌套的元素是后代关系，不是相邻兄弟，所以根本匹配不到目标元素。

正确解决方案 #

我们需要用后代选择器定位到图标元素，再通过CSS伪元素替换图标内容（因为CSS没法直接修改元素内的文本，所以得隐藏原有文本，用伪元素显示选中状态的图标）。

第一步：确保Material Icons字体已正确引入

如果还没引入，记得在页面<head>里添加：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

第二步：添加CSS代码实现图标切换

/* 默认状态下，图标显示print_disabled（HTML已定义，无需额外设置） */

/* 复选框选中时的图标处理 */
input:checked + .label-text .material-icons {
  /* 隐藏原有图标文本 */
  font-size: 0;
}

input:checked + .label-text .material-icons::before {
  /* 设置选中状态的图标内容 */
  content: "print";
  /* 必须指定Material Icons字体，否则无法显示图标 */
  font-family: "Material Icons";
  /* 和默认图标大小保持一致 */
  font-size: 24px;
  /* 继承默认的文字颜色 */
  color: inherit;
}

可选：更优雅的文本隐藏方式

如果你觉得font-size:0不够优雅，也可以用text-indent方案：

input:checked + .label-text .material-icons {
  text-indent: -9999px;
  position: relative;
  display: inline-block; /* 确保伪元素定位正确 */
}

input:checked + .label-text .material-icons::before {
  content: "print";
  position: absolute;
  left: 0;
  text-indent: 0;
  font-family: "Material Icons";
  color: inherit;
}

现在点击复选框，图标就能在print_disabled和print之间正常切换啦～

内容的提问来源于stack exchange，提问作者Bikram Nath