加号选择器(+)用于选择下一个相邻同级。

前一个兄弟姐妹是否有同等的?


当前回答

我的要求是在@Quentin的回答帮助下选择当前悬停的项目的前两个兄弟姐妹,我选择了前两个姐妹。

.儿童{宽度:25px;高度:25px;}.child:悬停{背景:蓝色;}.child:has(+.child:悬停){背景:黄色;}.child:has(+.child+.child:悬停){背景:绿色;}.child:悬停+.child{背景:红色;}.child:悬停+.child+.child{背景:洋红色;}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>

选择所有以前的同级

.儿童{宽度:25px;高度:25px;}.child:悬停{背景:蓝色;}.child:has(~.child:悬停){背景:红色;}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>

其他回答

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

假设我们有:

<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元素(或其他标签)的链接。

虽然没有以前的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()

另一种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>

/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色:红色;}ul>li目标,ul>li.target~li{颜色:继承;}<ul><li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</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来满足此类需求。