如何使父母的孩子 div 可聚焦，但孙子 div 不集中？

Question

我想让父div的所有子代都是可聚焦的，而不是孙代。

像这样：

<div class="parent" >
<div class="child1" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child2" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child3" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child4" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child5" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
<!-- more divs-->
</div>
</div>

有可能用纯HTML、CSS来实现吗？

在父div上使用tabindex=0是否会使所有子div都可聚焦？还是我需要为每个孩子单独添加一个tabindex？

使用键盘上的选项卡按钮

Answer 1

将tab-index设置为-1可通过按下选项卡来防止元素聚焦。这可以通过JS:实现自动化

document.querySelectorAll('.parent > * > *').forEach((e)=>{
e.setAttribute("tabindex", -1);
})

<div class="parent">
<div class="child1">
<!-- should be focused-->
<div class="grandchild"></div>
<!-- shouldn't be focused-->
</div>
<div class="child2">
<!-- should be focused-->
<div class="grandchild"></div>
<!-- shouldn't be focused-->
</div>
<div class="child3">
<!-- should be focused-->
<div class="grandchild"></div>
<!-- shouldn't be focused-->
</div>
<div class="child4">
<!-- should be focused-->
<div class="grandchild"></div>
<!-- shouldn't be focused-->
</div>
<div class="child5">
<!-- should be focused-->
<div class="grandchild"></div>
<!-- shouldn't be focused-->
<!-- more divs-->
</div>
</div>

Answer 2

参考MDN文档，

• 只有交互式组件必须具有选项卡索引
• 避免使用大于0的tabindex值

元素上的正tabindex使其可聚焦，但这种可聚焦性并不是由其每个子元素继承的。

在纯html中，我认为除非在元素的每个子元素上添加tabindex="0"，否则无法使它们成为可聚焦的。最简单的方法是通过做类似的事情来使用javascript

/// make elements focusable
Array.from(
document.querySelectorAll(".focusable")
).forEach(item => item.tabIndex = 0);
/// make elements not focusable
Array.from(
document.querySelectorAll(".grandchild")
).forEach(item => item.tabIndex = -1);