Question

我对HTML类和ID有点困惑，因为我想用它们来描述HTML元素。这是否有效且大多数浏览器都支持？

我使用两者的动机是：

我有一个CSS风格，我想应用于多个元素。
我有一些AJAX和Javascript会操纵那些相同的元素，所以我需要一种方法来识别使用ID的元素。
所以我想使用id来识别JS操作的每个元素，同时我想指定一个类，以便从同一个css中应用相同的样式。

Answer 1

ID只对一个项目是唯一的，其中一个类可用于将多个项目组合在一起。你可以按照你的说法一起使用它们，ID作为Javascript的唯一标识符和用CSS标记的类。

搜索html class vs id以获取有关此主题的许多文章。

示例：

<ul>
    <li class="odd" id="item1">First Item in the List</li>
    <li class="even" id="item2">Second Item in the List</li>
    <li class="odd" id="item3">Third Item in the List</li>
</ul>

Answer 2

是的，在一个元素中同时使用ID和Class属性是完全有效的。例如：

<div class="infoBox" id="myUniqueStyle"> *content* </div>

但是，请记住，ID只能使用一次（因此可以使用它的名称），而您可以像使用文档一样多次使用类。您仍然可以使用ID和类来应用样式，而只有ID是通过javascript到达元素的简单方法。

这样做的一个好方法是将ID应用于您知道唯一的所有元素（标题，导航，主容器等），以及将类应用于其他所有元素。

“ ”适用于使用ID的元素：“此是导航栏”，“此是标题”

“ a ”或“ ”适用于使用类的元素：“此是 blogPost”，“此是 infoBox“等。

Answer 3

如果需要，你绝对可以同时使用。

ID通常用于标识您网站的结构部分 - 您应该只包含具有特定ID的一个元素，并且任何元素只能包含一个ID。

一个类用于设置可能在HTML文件中的多个位置使用的样式 - 任何元素都可以设置多个类。

使用ID和类的典型HTML文档可能类似于

<html>
...
<body>
<div id="header"></div>
<ul id="nav" class="full-width dark">...</ul>
<div id="content">
<div id="important-container" class="class-set-by-javascript another-class-set-by-javascript"></div>
</div>
</body>
</html>

Answer 4

是的，任何普通浏览器都应允许设置CSS类，而不管元素ID如何。但是，在特定元素上设置样式（例如，使用id）可能会覆盖通过CSS类设置的样式。

Answer 5

关于在CSS声明中组合class和id的一个非常模糊的注释，IE6存在一个错误，如果你有：

两页或多页有一个元素具有相同的id
这些元素有所不同 class ES
你正在用他们造型 #idname.classname规则

然后只有样式表中的第一个规则才会生效。

有关详细信息，请参阅this page

Answer 6

是的，它在所有浏览器中都有效。 ID通过其他人表达您的html控件的唯一IDentification，并且类将一些样式应用于它。每页只有一个出现时使用ID。当每页出现一个或多个出现时使用类。

带ID的HTML类

6 个答案: