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