对其中一个元素的焦点应用相同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;
}

这是一个例子.

它只会在你专注于第一个时选择它们.

这仅适用于CSS3,因为我们使用的是通用兄弟选择器.

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

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