另一种flexbox解决方案

您可以使用与HTML中元素的顺序相反的方式。然后除了使用Michael_B的答案中的顺序外，还可以使用灵活的方向：行反转；或弯曲方向：列反转；这取决于您的布局。

工作样本：

.flex弯曲{显示：柔性；弯曲方向：行反转；/*在“反转”结尾（即开头）对齐内容*/调整内容：柔性端；}/*在悬停目标上，其“先前”元素*/.flex项：悬停~.flex项{背景色：石灰；}/*仅用于演示的样式*/.flex项目{背景色：橙色；颜色：白色；填充：20px；字体大小：3rem；边界半径：50%；}<div class=“flex”><div class=“flex item”>5</div><div class=“flex item”>4</div><div class=“flex item”>3</div><div class=“flex item”>2</div><div class=“flex item”>1</div></div>

没有，也有。

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

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

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

根据您的确切目标，有一种方法可以在不使用父选择器的情况下实现父选择器的有用性（即使存在）。。。

假设我们有：

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们可以做什么来使用间距使袜子块（包括袜子颜色）在视觉上突出？

什么会很好，但不存在：

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在的内容：

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这将所有锚链接设置为顶部有15px的边距，并将其重置为0，以用于LI中没有UL元素（或其他标签）的链接。

我找到了最简单的解决方案。它可能只适用于你正在做的事情。

假设您想将鼠标悬停在“sibling_2”上以更改以下示例中的“sibling_1”：

<div class='parent'><div class='sibling_1'></div><div class='sibling_2'></div></div>

由于没有以前的元素选择器，您可以简单地切换“sibling_1”和“sibling_2”并应用，使它们看起来相同。

.父级{显示：柔性；弯曲方向：行反转；}

现在您可以这样选择它们。.sibling_1：悬停~.sibling_2{#您的CSS}

考虑flex和grid布局的order属性。

我将在下面的示例中重点讨论flexbox，但同样的概念适用于网格。

---

使用flexbox，可以模拟以前的同级选择器。

特别是，flex order属性可以在屏幕上移动元素。

下面是一个示例：

当元素B悬停时，您希望元素A变为红色。＜ul＞<li>一个</li><li>B级</li></ul>

步骤

让ul成为一个柔性容器。ul｛display：flex；｝

---

颠倒标记中兄弟姐妹的顺序。＜ul＞<li>B级</li><li>一个</li></ul>

---

使用同级选择器以元素a为目标（~或+即可）。li：悬停+li｛背景色：红色；｝

---

使用弹性顺序属性可以恢复视觉显示上同级的顺序。li：最后一个子项｛顺序：-1；｝

---

……瞧！上一个同级选择器已诞生（或至少是模拟的）。

以下是完整代码：

上一页{显示：柔性；}li：悬停+li{背景色：红色；}李：最后一个孩子{顺序：-1；}/*非必要装饰风格*/李{高度：200px；宽度：200px；背景色：浅绿色；边距：5px；列表样式类型：无；光标：指针；}＜ul＞<li>B级</li><li>一个</li></ul>

根据flexbox规范：

5.4.显示顺序：顺序属性默认情况下，柔性项的显示和布局与源文档中显示的顺序相同。这个order属性可用于更改此排序。order属性通过将弹性项分配给序数组来控制弹性项在弹性容器中的显示顺序。它接受一个<integer>值，该值指定flex项的顺序组属于。

所有弹性项的初始订单值为0。

另请参见CSS网格布局规范中的顺序。

---

使用flex order属性创建的“以前的同级选择器”示例。

.container｛display：flex；｝.box5｛顺序：1；｝.box5:悬停+.box4｛背景颜色：橙色；字体大小：1.5em；｝.box6｛顺序：-4；｝.box7｛顺序：-3；｝.box8｛顺序：-2；｝.box9｛顺序：-1；｝.box9:hover~：not（.box12）：第n个孩子（-1n+5）{背景色：橙色；字体大小：1.5em；}.box12｛顺序：2；｝.box12:hover~：最后第n个孩子（-1n+2）{背景色：橙色；字体大小：1.5em；}.box21｛顺序：1；｝.box21:悬停~.box｛背景色：橙色；字体大小：1.5em；｝/*非必要装饰风格*/.容器{填充：5px；背景色：#888；}.box格式{高度：50px；宽度：75px；边距：5px；背景色：浅绿色；显示：柔性；对齐内容：中心；对齐项目：居中；文本对齐：居中；光标：指针；}<p>使用flex＜code＞order＜/code＞属性构造上一个同级选择器</p><div class=“container”><div class=“box box1”><span>1</span></div><div class=“box box2”><span>2</span></div><div class=“box box3”><span>3</span></div><div class=“box box5”><span>HOVER ME</span></div><div class=“box box4”><span>4</span></div></div><br><div class=“container”><div class=“box box9”><span>HOVER ME</span></div><div class=“box box12”><span>HOVER ME</span></div><div class=“box box6”><span>6</span></div><div class=“box box7”><span>7</span></div><div class=“box box8”><span>8</span></div><div class=“box box10”><span>10</span></div><div class=“box box11”><span>11</span></div></div><br><div class=“container”><div class=“box box21”><span>HOVER ME</span></div><div class=“box box13”><span>13</span></div><div class=“box box14”><14</span></div><div class=“box box15”><15</span></div><div class=“box box16”><span>16</span></div><div class=“box box17”><span>17</span></div><div class=“box box18”><span>18</span></div><div class=“box box19”><span>19</span></div><div class=“box box20”><span>20</span></div></div>

jsFiddle公司

---

附带说明——关于CSS的两个过时的信念

Flexbox打破了长期以来对CSS的信念。

一个这样的信念是，在CSS中不可能有前一个同级选择器。

如果说这种信念是普遍存在的，那就轻描淡写了。以下是关于堆栈溢出的相关问题示例：

使用选择器选择CSS中元素的前一个同级CSS：选择上一个同级CSS选择上一个同级CSS中的上一个相邻选择器悬停时选择上一个同级获取前一个同级的CSS选择器使用CSS更改悬停时同级元素的颜色如何使用selenium css语法选择上一个同级CSS选择器，用于选择在另一个元素之前出现的元素？如何仅使用CSS将样式添加到活动输入的上一个同级下一个和上一个元素的CSS选择器悬停div时如何影响其他元素

如上所述，这种观点并不完全正确。可以使用flex order属性在CSS中模拟以前的同级选择器。

z指数神话

另一个长期以来的观点是，z索引只对定位元素有效。

事实上，该规范的最新版本——W3C编辑草案——仍然认为这是正确的：

9.9.1指定堆栈级别：z索引所有物z指数值：auto||inherit初始：自动适用于：定位的图元继承：否百分比：不适用媒体：视觉计算值：按规定（添加强调）

然而，事实上，这些信息是过时和不准确的。

即使位置是静态的，作为弹性项或网格项的元素也可以创建堆叠上下文。

4.3.柔性项目Z-订购Flex项的绘制与内联块完全相同，除了使用订单修改的文档顺序代替原始文档顺序和z索引值而不是自动创建堆叠上下文，即使位置是静态的。5.4.Z轴排序：Z轴索引属性网格项的绘制顺序与内联块完全相同，除了顺序修改的文档顺序是用于代替原始文档顺序和z索引值，而不是自动创建堆叠上下文，即使位置是静态的。

下面是一个z索引在非定位弹性项上工作的演示：https://jsfiddle.net/m0wddwxs/

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

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