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

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


当前回答

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

我也有同样的问题,但后来我有了“嘘”的一刻。而不是写作

x ~ y

y ~ x

显然,这与“x”而不是“y”匹配,但它回答了“有匹配吗?”的问题,简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。

我意识到最初的问题是一个CSS问题,所以这个答案可能完全不相关,但其他Javascript用户可能会像我一样通过搜索发现这个问题。

目前还没有正式的方法来做到这一点,但你可以使用一个小技巧来实现这一点!请记住,它是实验性的,并且有一些限制。。。(如果您担心导航器兼容性,请检查此链接)

您可以做的是使用CSS3选择器:名为nth-child()的伪类

#列表>*{显示:内联块;填充:20px 28px;右边距:5px;边框:1px实心#bbb;背景:#ddd;颜色:#444;边距:0.4em 0;}#列表:第n个子项(-n+4){颜色:#600b90;边框:1px红色虚线;背景:橙色;}<p>orange元素是使用li:nth child(-n+4)选择的上一个同级li</p><div id=“list”><span>1</span><!--将选择--><p>2</p><!--将选择--><p>3</p><!--将选择--><div>4</div><!--将选择--><div>5</div><p>6个</p><p>7个</p><p>8个</p><p>9个</p></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>

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