我遇到了同样的问题，当我试图更改输入焦点上的前置图标填充颜色时，我的代码看起来像这样：

<template #append>
    <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

问题是我使用了一个vue引导槽来注入前缀，所以即使我改变了位置，输入后仍然会呈现

嗯，我的解决方案是滑动它们的位置，并添加自定义前缀和使用的~符号，因为css不支持前一个同级。

<div class="form-input-prepend">
    <svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

Scss样式

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}

因此，只需尝试更改其位置，如果需要，请使用css order或position:absolute；以实现您想要的，并避免使用javascript来满足此类需求。

/*向所有子级添加样式，然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色：红色；}ul＞li目标，ul>li.target~li{颜色：继承；}＜ul＞<li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>

在悬停时覆盖下一个同级的样式，这样看起来只有前一个同级在悬停时添加了样式。

ul力{颜色：红色；}ul：悬停li{颜色：蓝色；}ul：悬停li：悬停~li{颜色：红色；}＜ul＞<li>项目1</li><li>项目2</li><li>项目3</li></ul>

不，没有“上一个同级”选择器。

在一个相关的注释中，~表示一般继承兄弟（意味着元素在这个之后，但不一定紧接着），并且是一个CSS3选择器。+用于下一个兄弟姐妹，为CSS2.1。

请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1（CSS 2.1）规范中的5.7相邻同级选择器。

没有“前一选择器”，但可以使用：not和~（“后选择器”）的组合。没有逆序，没有javascript。

.父级a{颜色：蓝色}.父项a.活动{颜色：红色}.parent a：不是（.parent a.active~a）{颜色：红色}<div class=“parent”><a href=“”>链接</a><a href=“”>链接</a><a href=“”class=“active”>链接</a><a href=“”>链接</a><a href=“”>链接</a></div>

我认为我的方法比“设置所有div的样式，而不是删除div之后的样式”，或者使用javascript，或者使用相反的顺序更直接。

我也有同样的问题，但后来我有了“嘘”的一刻。而不是写作

x ~ y

写

y ~ x

显然，这与“x”而不是“y”匹配，但它回答了“有匹配吗？”的问题，简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。

我意识到最初的问题是一个CSS问题，所以这个答案可能完全不相关，但其他Javascript用户可能会像我一样通过搜索发现这个问题。