css – 对所有元素应用相同的效果,并在其中一个元素的焦点上使用相同的tabindex

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

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

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

解决方法

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

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

Here就是一个例子.

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

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

当第一个聚焦时,它选择具有相同tabindex的第二个并添加背景.第二个li [tabindex =’1′]：重点是将背景应用于当前聚焦的一个.

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