在我的最后一篇文章中,我问过如何使不可聚焦的元素成为css选择器的焦点.答案是使用tabindex.
现在我想要的是,当一个带有选择器的元素被聚焦(单击)时,选择器选择的另一个元素也会产生效果.这可能听起来很奇怪,但我很久以前就不小心做了,但我忘了怎么做.
解决方法
这个选择器可以解决问题:
li[tabindex='1']:focus ~ li[tabindex='1'],li[tabindex='1']:focus { background: black; color: white; }
它只会在你专注于第一个时选择它们.
这仅适用于CSS3,因为我们使用的是通用兄弟选择器.
当第一个聚焦时,它选择具有相同tabindex的第二个并添加背景.第二个li [tabindex =’1′]:重点是将背景应用于当前聚焦的一个.
通用兄弟选择器只能选择具有相同父节点的后续元素.遗憾的是,CSS无法通过DOM传播.出于这个原因,让它向后工作的唯一方法是使用Javascript.