html - CSS 中的类/id 和自定义 HTML5 属性有什么区别？

Question

通过类/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 源代码。

---

仅供那些不明白问题的人...我写的第一个片段是识别一个元素BY HTML5 ATTRIBUTE。第二个片段是按类识别元素。

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

Answer 1

你的 active 属性示例是无效的 HTML，尽管它通常(总是？)在实践中起作用，因为 CSS 是一个独立的规范，不关心 HTML 的规则，浏览器试图做“当涉及到无效的 HTML 时，你的意思是什么。

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

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

<li data-active="yeppers">

然后用 CSS 定位它:

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

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

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