Html 是否从父类更改材质图标？

当元素的父元素具有不同的类时，我尝试更改材质图标的内容

因此，当图标本身显示时，它可能有连字

复选框\u大纲\u空白

，但当该项目的父项有不同的类时，连字将是

复选框

如果非psuedo项目上允许使用

content

属性，我会执行以下操作

figure.selected figcaption i {
  content: "check_box";
}

但那不是一件事

我试图对psuedo元素执行相同的操作，但是我需要将文本隐藏在现有图标中。我试着遵循使用文本缩进技巧的方法，但我的尝试没有成功

我很接近，但正如你在小提琴中看到的，

figcaption

没有psuedo元素版本的背景（或其他属性-边框、填充等）

---

我更喜欢（非脚本）方式来更改材质图标，最好使用名称（这是复制图标代码的pita！）

正如您所解释的，我们不能使用内容属性。我在html和css中做了一些小改动。我把复选框、大纲和复选框放在一起，当我们选择了图中的类时，在左边滑动

以下是链接： 只需将所选类添加到示例中的图中

希望这对你有用

谢谢

<figure>
    <img src="https://placehold.it/150">
<div>   <figcaption>
  <i class="material-icons">check_box_outline_blank check_box</i>
</figcaption></div>
</figure>

<figure class="selected">
    <img src="https://placehold.it/150">
    <div><figcaption><i class="material-icons">check_box_outline_blank check_box</i></figcaption>
</div>

figure div {
    position: absolute;
    top: 0;
    right: 0;
   width: 24px;
    height: 24px;
    overflow: hidden;
}
figure figcaption {
    position: relative;
    background-color: #999;
    color: #fff;
    left: 0px;
    width: 55px;
    overflow: hidden;
}
figure.selected figcaption {
     left: -29px;
}

复选框\u大纲\u空白复选框
复选框\u大纲\u空白复选框
图形分割{
位置：绝对位置；
排名：0；
右：0；
宽度：24px；
高度：24px；
溢出：隐藏；
}
图figcaption{
位置：相对位置；
背景色：#999；
颜色：#fff；
左：0px；
宽度：55px；
溢出：隐藏；
}
图1.所选的figcaption{
左：-29px；
}

嗯。有趣的方法。为这个主意干杯！