html - 在实践中如何使用 data-* 属性来替换 id ？
问题描述
我知道，感谢之前的问题，这不是一个好主意，但显然是可能的。但我处于 CMS 自动剥离任何id=选择器的情况，我正在尝试找到一种解决方法。（不幸的是，没有 JS；任何解决方案都需要严格的 CSS 和 HTML。）
但是，我对 data-* 属性的概念完全陌生，而且我很难自己解决这个问题，因为我自己不熟悉它们的工作方式不利于正确地完成它。
所以，这就是问题所在。假设我想在此 CodePen 中重新创建类似 CSS :target 选项卡的内容：https ://codepen.io/MarekZeman91/pen/wBwbrp 。
是否可以用 data-* 属性替换 id 选择器？如果是这样，我将如何去做？不仅是为了示例，而是在一般情况下。
解决方案
假设您想用 idX的属性替换所有具有 id 的元素data-X，例如
<div id="tabs">
会变成
<div data-tabs>
更改 HTML 后，您需要：
(1) 更改 CSS。ID 的选择器字符串是#id; 具有特定属性的元素的选择器字符串是[attributeName]. 所以#tabs会变成[data-tabs]. #tabs用替换所有实例[data-tabs]。
请记住，与属性选择器相比，ID 选择器具有非常高的特异性。如果您要定位的元素与多个冲突的 CSS 规则匹配，则将 ID 更改为属性可能会导致错误的规则获胜，因此您可能需要进行更多更改，直到所有规则都按预期应用。
(2) 更改Javascript。就像上面一样，[data-tabs]在您曾经拥有的任何地方使用选择器字符串#tabs，例如：
var link = document.querySelector('#tabs > .tab-link');
变成
var link = document.querySelector('[data-tabs] > .tab-link');
您可以对所有存在的 ID 重复上述模式，直到没有留下任何 ID。
您也可以考虑改用类，它们也可以正常工作，例如更改
<div id="tabs">
至
<div class="tabs">
然后在.tabs任何地方使用选择器字符串而不是#tabs.