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

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


当前回答

在悬停时覆盖下一个同级的样式,这样看起来只有前一个同级在悬停时添加了样式。

ul力{颜色:红色;}ul:悬停li{颜色:蓝色;}ul:悬停li:悬停~li{颜色:红色;}<ul><li>项目1</li><li>项目2</li><li>项目3</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来满足此类需求。

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

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

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

你可以使用双重否定

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

用TAG或.CLASS替换SELECTOR(使用#ID可能太具体)。将FILTER替换为其他:PSUEDO-SELECTOR(我只尝试过:悬停)或.CLASS(更多关于通过Javascript切换的信息)。

因为典型的用法可能依赖于悬停(参见下面的示例)

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

/*解决方案*/div.parent:hover>div.child:not(:hover):not(:悬停~.child){背景色:红色;边界半径:1.5em;}div.parent:hover>div.child:not(:hover):not(:悬停~.child)>div{背景色:黄色;}/*做得漂亮(有点)*/分部租金{宽度:9em;高度:9em;/*布局*/显示:栅格;栅格样板列:自动自动;栅格样板行:自动自动;}分部子项{/*尺寸*/高度:3em;宽度:3em;/*布局*/位置:相对;/*光标*/光标:指针;/*演示文稿*/边框:1px黑色实心;边界半径:1.5em;}.星{/*尺寸*/宽度:2.5em;高度:2.5em;/*放置*/位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);/*几何形状*/-webkit剪辑路径:多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);剪辑路径:多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);/*演示文稿*/背景色:浅灰色;}div.child:悬停{/*演示文稿*/背景色:黄色;边界半径:1.5em;}div.child:悬停>div.star{/*演示文稿*/背景色:红色;}<div class=“parent”><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div></div>

不,没有“上一个同级”选择器。

在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。

请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。

+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹

您可以使用两个斧头选择器:!和

传统CSS中有两个后续的同级选择器:

+是紧接其后的同级选择器~是任何后续的同级选择器

在传统的CSS中,没有以前的同级选择器。

然而,在axe CSS后处理器库中,有两个先前的同级选择器:

? 是前一个同级选择器(与+相反)! 是之前的任何同级选择器(与~相反)

工作示例:

在以下示例中:

.any后续:hover~div选择任何后续div立即后续:hover+div选择立即后续div.任何以前的:悬停!div选择之前的任何div.上一个:悬停?div选择上一个div

第二部分{显示:内联块;宽度:60px;高度:100px;颜色:rgb(255、255、255);背景色:rgb(255,0,0);文本对齐:居中;垂直对齐:顶部;光标:指针;不透明度:0;过渡:不透明度0.6s缓和;}代码{显示:块;边距:4px;字体大小:24px;线条高度:24px;背景色:rgba(0、0、0和0.5);}div:第n个类型(-n+4){背景色:rgb(0,0,255);}div:第n种类型(n+3):第n个类型(-n+6){不透明度:1;}.any后续:hover~div,.紧随其后:hover+div,.任何以前的:悬停!div中,.上一个:悬停?第二部分{不透明度:1;}<h2>将鼠标悬停在下面的任何块上</h2><div></div><div></div><div class=“immediate previor”>悬停<code></代码>选择器</div><div class=“any previous”>悬停<code></代码>选择器</div><div class=“any后续”>悬停<code>~</code>选择器</div><div class=“immediate后续”>悬停<code>+</code>选择器</div><div></div><div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>