CSS 中的类/ID 和自定义 HTML5 属性有什么区别？答案

【问题标题】：What is the difference between classes/ids and custom HTML5 attributes in CSS?CSS 中的类/ID 和自定义 HTML5 属性有什么区别？
【发布时间】：2017-05-07 19:10:12
【问题描述】：

通过 class/id 或自定义属性识别 HTML 元素有什么区别吗？

我的意思是，例如，如果我有一个菜单并且我想更改当前（活动）li 元素的颜色，我目前使用这个：

<style>
li[active]{color:red}
</style>

<ul>
    <li active>...</li>
    <li>...</li>
</ul>

但最常见的用法是：

<style>
li.active{color:red}
</style>

<ul>
    <li class="active">...</li>
    <li>...</li>
</ul>

那么它们之间有什么区别呢？我的意思是，他们有相同的结果，但为什么人们不使用我写的第一种方法呢？这要简单得多，并且可以生成更清晰的 HTML 源代码。

仅针对那些不明白问题的人...我写的第一个 sn-p 是标识一个元素 BY HTML5 ATTRIBUTE。第二个 sn-p 是标识一个元素 BY CLASS。

那么问题又来了：HTML5 ATTRIBUTE 和 CLASS OR ID NAME 识别 HTML 元素有什么区别？

【问题讨论】：

简而言之，id have a higher specificity (are more important) than classes 和 id 在 HTML 页面上是唯一的。阅读上面的链接以了解更多信息。
但是您的问题是具体询问 id 和 class 之间的区别，但是您说您知道区别...那么问题的重点是什么？ :-/
@Kano OP 反复使用术语“id”，它是 HTML 基础结构特定部分的特定术语。仅仅因为 OP 打算要求别的东西，我们不能神奇地知道 OP 所写的内容。
鲍勃，我已经编辑了标题以更好地满足您的实际要求。我自己没有结束你的问题，问题是通过选民的相互共识来结束的。我已提名您的问题重新开放。重要的是要非常清楚您的要求是什么，以避免这些误解。 :-)
@Bob 在我们等待重新提出问题时，您会得到答案 - 来自 W3C 规范：Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. (link)。综上所述-某些属性具有某些意图。您可以应用自定义属性，但随后您还必须重新发明与 classList API 相关的所有其他内容。

标签： html css

【解决方案1】：

您的active 属性示例是无效的 HTML，尽管它通常（总是？）在实践中起作用，因为 CSS 是一个不关心 HTML 规则的单独规范，并且浏览器尝试执行“你的意思”时它涉及到无效的 HTML。

自定义属性应以 data- 前缀开头，对应 spec。这些数据属性通常用于将元素与一些用于 JavaScript 的额外数据相关联，尽管也可以使用 CSS 来定位它们。

从技术上讲，你可以做类似的事情

<li data-active="yeppers">

然后用 CSS 定位它：

li[data-active='yeppers'] { ... }

但是，对于大多数必须查看您的代码的人来说，这将是非常不寻常和烦人的。

从语义上讲，“活动”并不是真正的数据，而且它不一定是某个元素独有的，因此分配 class="active" 最有意义。

【讨论】：

好吧，active 实际上并不是无效的 HTML。它只是不是预定义的 HTML5 属性。然而，它是一个完全有效的 HTML5 自定义属性。
它是无效的因为它不是一个预定义的属性并且不使用为自定义属性提供的机制，即data-*。如果（规范）允许页面作者添加任意属性，它将有效地阻止规范以向后兼容的方式定义新属性。像ng-blah 这样的东西虽然无效，但不太可能发生冲突，但我不太确定active。