关于html：CSS中的类/标识和自定义HTML5属性之间有什么区别？


What is the difference between classes/ids and custom HTML5 attributes in CSS?

通过类/ id或通过自定义属性标识HTML元素之间是否有区别？

我的意思是，例如，如果我有一个菜单并且想更改当前(活动)li元素的颜色，那么我目前正在使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
li[active]{color:red}
</style>


<ul>

    <li active>...
</li>

   
<li>
...
</li>


</ul>

但最常见的用法是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
li.active{color:red}
</style>


<ul>

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

   
<li>
...
</li>


</ul>

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

仅针对那些没有问题的人...我编写的第一个代码段是通过HTML5 ATTRIBUTE标识元素。第二个片段是按CLASS标识元素。

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

相关讨论

您的active属性示例是无效的HTML，尽管实际上它通常(总是？)会起作用，因为CSS是一个独立的规范，并不关心HTML的规则，浏览器会在出现以下情况时尝试执行"您的意思"涉及无效的HTML。

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

从技术上讲，您可以执行类似

的操作

1
<li data-active="yeppers">

然后使用CSS定位它：

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

但是，对于大多数不得不查看您的代码的人来说，这将是非常不寻常且令人讨厌的事情。

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

相关讨论