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

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


当前回答

你可以使用双重否定

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选择所有以前的兄弟姐妹以获得星级

因此,我使用每个人的回答来发布我的解决方案,任何人都可以将其作为参考,并可能提出改进建议。

//仅用于检查输入值//Consts公司const starRadios=document.querySelectorAll('input[name=“rating”]');//事件监听器starRadios.forEach((radio)=>radio.addEventListener('change',getStarRadioValue));//获取星形无线电值函数getStarRadioValue(事件){警报(event.target.value)//用它做点什么};.星级{字体大小:1.5rem;unicode bidi:bidi覆盖;方向:rtl;文本对齐:左侧;}.star-rating.editable标签:悬停{光标:指针;}.star-rating.editable.icon星形:悬停,.star-rating.editable.icon星形:悬停~.icon星形{背景色:#fb2727!重要的}.icon星形{位置:相对;背景色:#72747d;宽度:32px;高度:32px;显示:内联块;过渡:背景色0.3s;}.icon-star填充{背景色:#fb2727;}.icon星形>标签{显示:内联块;宽度:100%;高度:100%;左:0;顶部:0;位置:绝对;}.icon star>标签>输入[类型=“radio”]{位置:绝对;顶部:0;左:0;变换:translateY(50%)translateX(50%);显示:无;}<div class=“星级可编辑”><span class=“icon star”><标签><input type=“radio”name=“rating”value=“5”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“4”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“3”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“2”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“1”/></label></span></div>

对于我的用例,需要更改焦点上的先前元素样式,并且悬停在父元素中只有两个项。为此,使用了:focuswithin和:hover伪类。

无论何时发生聚焦/悬停事件,都可以选择

.root元素:悬停.element到样式{background color:red;}.root元素:将焦点放在.element中,以设置样式{background color:green;}<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>

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

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

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

没有这样的选择器,但在DOM API中有一个非常只读的属性

Node.previousSibling节点

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

x ~ y

y ~ x

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

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