对其中一个元素的焦点应用相同tabindex的所有元素应用相同的效果

Question

在我的最后一篇文章中，我问过如何使不可聚焦的元素成为css选择器的焦点。答案是使用tabindex。

现在我想要的是，当一个带有选择器的元素被聚焦（单击）时，选择器选择的另一个元素也会产生效果。这可能听起来很奇怪，但我很久以前就不小心做了，但我忘记了。

这是jsfiddle示例： http://jsfiddle.net/s4nji/xa8j4/

Answer 1

这个选择器可以解决这个问题：

li[tabindex='1']:focus ~ li[tabindex='1'], li[tabindex='1']:focus {
    background: black;
    color: white;
}

Here就是一个例子。

它只会在你专注于第一个时选择两者。

这只适用于CSS3，因为我们使用的是通用兄弟选择器。

当第一个聚焦时，它会选择具有相同tabindex的第二个并添加背景。第二个li[tabindex='1']:focus是将背景应用于当前关注的背景。

通用兄弟选择器只能选择具有相同父级的后续元素。遗憾的是，CSS无法通过DOM传播。出于这个原因，使其向后工作的唯一方法是使用Javascript。