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 元素。第二个片段是识别元素 BY CLASS 。

再次提出问题：通过 HTML5 ATTRIBUTE 和 CLASS OR ID NAME 识别HTML元素有什么区别？

Answer 1

您的active属性示例是无效的HTML，虽然它通常（总是？）在实践中起作用，因为CSS是一个单独的规范，不关心HTML的规则，浏览器尝试做什么＆＃34;你的意思＆＃34;当谈到无效的HTML。

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

从技术上讲，你可以做一些像

这样的事情

<li data-active="yeppers">

然后用CSS定位它：

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

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

从语义上讲，＆＃34;活跃＆＃34;不是真正的数据，并且它不一定是一个元素所独有的，因此分配class="active"最有意义。