如何用CSS类移除图片轮播点继承的Unicode减号字符？

看起来你遇到的核心问题是同一个active类被手风琴和轮播点共用，导致轮播点的.active状态意外继承了手风琴的:after伪元素样式，再加上你对CSS伪元素和选择器的用法理解有点偏差，才导致代码不生效。下面一步步帮你解决：

第一步：修正手风琴的伪元素选择器（最关键） #

原来的.active:after是全局生效的，只要元素有active类，就会显示减号。我们需要给它加上父类限定，让它只作用在手风琴按钮上：

把你的CSS里的这段：

.active:after {
  content: "\\2796";
}

改成：

/* 只有手风琴按钮的active状态才显示减号 */
.accordion.active:after {
  content: "\\2796";
}

同时保留手风琴未激活状态的伪元素样式：

.accordion:after {
  content: '\\02795'; /* 加号 */
}

第二步：移除HTML里错误的类名 #

你在HTML里写的class="active:after test"是错误的：:after是CSS伪元素语法，不是合法的类名，浏览器无法识别这种格式的类名。把这段HTML改成：

<div style="text-align:center" class="dot-container">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

这里用dot-container代替原来的test，语义更清晰，也避免混淆。

第三步：（可选）给轮播点的active状态明确禁用伪元素 #

如果上面的修改后还有问题，可以再给轮播点的.active状态明确设置content: none，彻底杜绝伪元素：

.dot.active:after {
  content: none;
}

为什么原来的代码不生效？ #

1. HTML类名错误：active:after不是合法的类名，:after是CSS用来创建伪元素的语法，不能直接写在HTML的class属性里。
2. CSS选择器错误：.active:after .test的含义是「选择.active元素的:after伪元素内部的.test类元素」，这和你想要的「给.test类下的.active元素的伪元素设置样式」完全不是一回事，正确的选择器应该是.test .active:after，不过我们通过第一步的修改已经从根源解决了问题，这个就不需要了。

修改后的完整CSS关键片段：

.accordion:after {
  content: '\\02795'; /* 加号 */
}

/* 仅手风琴按钮的active状态显示减号 */
.accordion.active:after {
  content: "\\2796";
}

/* 轮播点样式 */
.dot {
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.dot.active, .dot:hover {
  background-color: #717171;
}

/* 可选：确保轮播点没有伪元素 */
.dot.active:after {
  content: none;
}

这样修改后，轮播点的active状态就不会再显示手风琴的减号了，手风琴的展开/收起图标也能正常工作~

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