作为CSS属性的tabIndex？

Question

我正在尝试通过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调试器将其显示为一个未知属性。

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

我的问题可以总结为以下三点：

1. 样式和属性有什么区别？我想找一些比this SO answer更详细的内容。
2. HTML属性与CSS属性有何关联（例如tabIndex与tab-index等）？
3. 如何将tabIndex=0属性添加到所有包含className="my-checkbox"的div元素中？

- Menelaos Kotsollaris

---

我认为HTML属性和CSS之间并没有确定的关系... 我将以required为简单例子，您将不会找到类似CSS的东西，因为它与样式无关。而且我非常确定tabindex也是其中之一。 - Temani Afif

Answer 1

1. 样式和属性之间有什么区别？

一般来说，它们是两种独立的操作元素行为的方式。一些特定属性和CSS属性存在交叉（当然，CSS属性可以通过“style”属性设置），但除此之外，它们通常是互相独立的。更多信息请查看HTML 属性参考和CSS 参考。

这是因为 HTML 属性比 CSS 更早出现（约于1993年），后来才发明了 CSS（约于1996年，并经历了较长的采纳期）。HTML 属性通常定义元素的“基本”或“固有”属性，例如图像或脚本元素的“src”。传统表格也可以通过单独的属性控制其样式，因为在 CSS 流行之前需要这样做。

所以，多年过去后，这变成了有点混乱。

2. HTML 属性和 CSS 属性有什么关系？

如上所述，它们一般没有关联，除了像你链接的 <img width> 这样的特定情况。

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

这种情况不能使用 CSS 来实现。您应该将其添加到标记中，如果可能，在服务器端动态生成属性，或者（在我看来这是更糟糕的解决方案）在页面加载后使用 JavaScript。

- We Are All Monica

Answer 2

tabindex是一个属性，不能像SVG演示属性那样通过CSS进行设置。这个回答只是为了简化问题。此外，它全部小写。

- Robert Monfera