可以按如下方式使用：has（）。

.thePrevious:has(+ .theNextSibling)

我使用它来修复重叠的引导模式，如下所示。如果有多个模态，则之前的模态将被隐藏。

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }

虽然没有以前的CSS选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记：

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

在JavaScript中，只需执行以下操作：

document.querySelector(".child-2").parentElement.querySelector(".child-1")

这将首先选择父div，然后从child-2 div中选择child-1 div。

如果您使用jQuery，只需执行以下操作：

$(".child-2").prev()

没有，也有。

如果必须在输入之前放置标签，只需在输入之后放置标签，并将标签和输入保持在一个div中，并按如下方式设置div的样式：

.输入框{显示：柔性；弯曲方向：列反转；}<div class=“input box”><输入id=“电子邮件”class=“表单项”/><label for=“email”class=“表单项标题”>电子邮件*</label></div>

现在，您可以应用css中提供的标准下一个同级样式选项，并且它看起来就像您使用的是上一个同级的样式。

我找到了一种方法来设计所有以前的兄弟姐妹（与~相反），这取决于你需要什么。

假设你有一个链接列表，当你悬停在一个链接上时，之前的所有链接都应该变成红色。你可以这样做：

/*默认链接颜色为蓝色*/.父级a{颜色：蓝色；}/*上一个兄弟姐妹应该是红色的*/.parent:悬停{颜色：红色；}.父项a：悬停，.父a:悬停~a{颜色：蓝色；}<div class=“parent”><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a></div>

我遇到了一个类似的问题，发现所有这类问题都可以通过以下方式解决：

给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。

这样，您就可以设置当前项、先前项（所有项都被当前项和下一项覆盖）以及下一项的样式。

例子：

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

希望这对某人有所帮助。

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

<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来满足此类需求。