加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
我也有同样的问题,但后来我有了“嘘”的一刻。而不是写作
x ~ y
写
y ~ x
显然,这与“x”而不是“y”匹配,但它回答了“有匹配吗?”的问题,简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。
我意识到最初的问题是一个CSS问题,所以这个答案可能完全不相关,但其他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>
不,没有“上一个同级”选择器。
在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。
请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。
我遇到了同样的问题,当我试图更改输入焦点上的前置图标填充颜色时,我的代码看起来像这样:
<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来满足此类需求。
我也有同样的问题,但后来我有了“嘘”的一刻。而不是写作
x ~ y
写
y ~ x
显然,这与“x”而不是“y”匹配,但它回答了“有匹配吗?”的问题,简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。
我意识到最初的问题是一个CSS问题,所以这个答案可能完全不相关,但其他Javascript用户可能会像我一样通过搜索发现这个问题。
虽然没有以前的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()