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

【问题标题】：Select all sibling elements, not just following ones选择所有兄弟元素，而不仅仅是跟随元素
【发布时间】：2012-07-11 00:21:03
【问题描述】：

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

a:hover ~ a

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

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

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）更好，因为它将操作与选择器分离。