tabIndex 作为css属性？答案

【问题标题】：tabIndex as a css property?tabIndex 作为css属性？
【发布时间】：2018-08-25 20:59:17
【问题描述】：

我试图弄清楚如何通过 css 使用 HTML 属性 tabindex。

我特别想将tabIndex=0 添加到所有包含className='my-checkbox' 的div 元素中。

这就是我所拥有的：

<div tabIndex="0" className="my-checkbox">
...
<div>

由于我的<div className="my-checkbox"> 在我的应用程序中重复多次，我不想每次都明确定义tabIndex 属性；因此我正在寻找一种避免代码重复的方法。

如何将tabIndex=0 属性添加到所有包含className="my-checkbox" 的div 元素？

我尝试添加以下 css 规则，但没有成功：

div .my-checkbox-img {
   tab-index: '0'
}

这增加了一个tab-index 样式，它似乎不起作用； Google Chrome 调试器将其显示为 unknown property。

我尝试了nav-index，但这似乎也被弃用了。

总结一下我的问题：

【问题讨论】：

我不认为 html 属性和 CSS 之间肯定存在关系......我将举一个简单的例子 required 你不会找到类似 CSS 的，因为它什么都没有与造型有关。我很确定tabindex 就是其中之一。

【解决方案1】：

一般来说，它们是操纵元素行为的两种不同方式。某些特定属性和 CSS 属性之间存在一些临时重叠（当然，CSS 属性可以通过 style 属性设置），但除此之外，它们大多是独立的。如需更多信息，请查看HTML attribute reference 和CSS reference。

这是因为带有属性的 HTML 最先出现（大约在 1993 年），然后后来才发明了 CSS（大约在 1996 年，采用期很长）。 HTML 属性通常定义元素的“基本”或“固有”属性，例如图像或脚本元素的src。经典表格的大部分样式也可以由单独的属性控制，因为这是在 CSS 流行之前需要的。

所以是的，这些年来它变得有点乱了。

如上所述，它们通常不相关，除非在特定情况下，例如您链接到的 <img width>。

这种特殊情况是使用 CSS 无法做到的。您应该将其添加到标记中，尽可能在服务器端动态生成属性，或者（IMO 这是一个更糟糕的解决方案）在页面加载后使用 JavaScript。

【讨论】：

【解决方案2】：

tabindex 只是属性，不能通过 CSS 设置，不像 SVG presentation attributes。只需添加此答案即可切入正题。还有，都是小写的。

【讨论】：