tabIndex作为CSS属性？

Question

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

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

这就是我所拥有的：

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

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

如何为所有包含tabIndex=0的{​​{1}}元素添加div属性？

我试图添加以下css规则，但这没用：

className="my-checkbox"

这添加了div .my-checkbox-img { tab-index: '0' } 样式，该样式似乎不起作用； Google Chrome调试器将其显示为tab-index。

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

总结一下我的问题：

1. 样式和属性之间有什么区别？我在寻找比this SO answer更详细的内容。
2. html属性如何与css属性相关（例如unknown property至tabIndex等）？
3. 如何为所有包含tab-index的{​​{1}}元素添加tabIndex=0属性？

Answer 1

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

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

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

是的，多年来，情况变得一团糟。

1. html属性与CSS属性如何相关

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

1. 如何为所有包含tabIndex=0的{​​{1}}元素添加div属性？

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

Answer 2

tabindex仅是属性，不能通过CSS设置，与SVG presentation attributes不同。只需添加此答案即可。而且，都是小写。

Answer 3

我认为这是不可能的，因为我搜索了很多东西却一无所获