加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
我的要求是在@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来满足此类需求。