对其中一个的焦点上具有相同tabindex的所有元素应用相同的效果 [英] Apply same effect to all elements with the same tabindex on focus of one of them

问题描述

在我的最后一个，我问如何使不可聚焦的元素成为可聚焦的css选择器的手段。答案是使用tabindex。

On my last one, I asked how to make unfocusable elements become focus-able in the means of css selector. The answer is to use tabindex.

现在我想要的是，当一个有选择器的元素被聚焦（点击）时，选择器选择的另一个元素也会得到效果。

Now I wanted that, when an element with the selector is focused (clicked), the other element selected by the selector also got the effect. It may sound strange, but I could do that a long time ago accidentally, but I forgot how.

这里是jsfiddle的例子：
http://jsfiddle.net/s4nji/xa8j4/

Here is the jsfiddle example : http://jsfiddle.net/s4nji/xa8j4/

推荐答案

此选择器执行的诀窍：

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

这里是一个例子。

只有当你专注于第一个时才选择两者。

It only selects both when you focus on the first one though.

这只适用于CSS3，因为我们使用的是一般的sibling选择器。

This only works in CSS3 since we're using the general sibling selector.

当第一个焦点聚焦时，它选择第二个 tabindex 并添加背景。第二个 li [tabindex ='1']：focus 是将背景应用于当前聚焦的背景。

When the first one is focused, it selects the second one with the same tabindex and adds the background. The second li[tabindex='1']:focus is to apply the background to the currently focused one too.

通用同级选择器只能选择具有相同父级的后续元素。 CSS不能向上移动DOM，不幸的是。因此，让它向后工作的唯一方法是使用Javascript。

The general sibling selector can only select succeeding elements with the same parent. CSS can't travel up the DOM, unfortunately. For this reason, the only way to have it work backwards too would be to use Javascript.

这篇关于对其中一个的焦点上具有相同tabindex的所有元素应用相同的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！