如何修改 ::after 兄弟元素的 css？

Question

<div class="form-group form-group-lg">
    <div class="select-picker">
        <select class="form-control"></select>
    </div>
</div>

我有一个 select.form-control 元素，它当前会在焦点上更改其边框颜色，但还有一个 div.select-picker::after 元素，因此它实际上呈现如下：

<div class="form-group form-group-lg">
    <div class="select-picker">
        <select class="form-control"></select>
        div.select-picker::after
    </div>
</div>

现在边框只有 60% 左右，因为它没有改变 ::after 的边框颜色，我尝试做类似的事情

& > select.form-control {
    position: relative;

    border-radius: $input-border-radius;
    background-color: transparent;
    box-shadow: none; // remove the bootstrap styling

    appearance: none;

    &:focus + div.select-picker::after{
        outline: none;
        border-color: green; // don't change the color on focus
    }

但是没用

Answer 1

只有当 div.select-picker 实际上位于 select 元素之后时，“+”运算符才会起作用。

您可以使用 span 元素（或类似元素）来模拟您的 :after 伪元素，并使用“+”运算符对其进行样式设置。