选择所有兄弟元素，而不仅仅是跟随元素

Posted 2023-03-06

【中文标题】选择所有兄弟元素，而不仅仅是跟随元素

【英文标题】：Select all sibling elements, not just following ones

【发布时间】：2012-07-11 00:21:03

【问题描述】：

目的是当一个元素悬停时，定位到所有其他相同类型和相同级别的元素。试过了

a:hover ~ a

只是注意到这并没有针对悬停元素之前的元素......有css的解决方案吗？或者我应该以某种方式摆脱这种情况

【参考方案1】：

这是parent 或< 选择器问题的变体（ofwhichtherearemany）。我知道这并不完全相同，但我相信您可以想象兄弟选择器是如何从父选择器派生的。

Jonathan Snook 有一个 excellent blog post 说明为什么它不存在，我认为我不能做得更好，所以如果您感兴趣，我会让您阅读。基本上，由于元素的选择方式，这在技术上是一项艰巨的工作，并且在代码结构方面会导致整个世界的混乱。

所以简短的回答是，这不存在，恐怕你需要求助于 JS 来修复它。

编辑：只是几个修复示例。使用 jQuery：

$(selector).siblings().css(...);

或者如果你想包含元素：

$(selector).parent().children().css(...);

或者在原版 JS 中：

var element = document.querySelectorAll(selector); // or getElementById or whatever
var siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) 
    if (siblings[i] !== element)  // optional
        siblings[i].style.color = 'red';
    

【讨论】：

注意香草JS部分，将i = siblings.length替换为i < siblings.length以避免循环。你也可以添加一个像nodes[i] instanceof htmlLIElement这样的测试来只选择HTML标签。

谢谢，这是一个错字。现已修复。

【参考方案2】：

您可以使用 jQuery 而不是 CSS 来切换悬停状态：

HTML：

​<div>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

div a color: #000;
div a.hover color: #00f;

​ jQuery：

$("div a").hover(
    function()
        $("div a").addClass("hover");
    ,
    function()
        $("div a").removeClass("hover");
    
);

Fiddle

【讨论】：

我认为$(this).siblings() 或$(this).parent().children()（取决于您是否要包含this）更好，因为它将操作与选择器分离。