Question

是否允许在同一HTML标记中同时包含class AND id属性？

<p id='a' class='b'>

我知道每页有一个id的规则，标签中允许多个类，但我没有看到有关类和ID的任何内容。

Answer 1

是的，这很好，非常正常。

id允许您直接引用该元素。该类可以说“此元素喜欢此类的其他元素”。这是差异的handy tutorial。

为了进一步说明，请考虑Javascript提供getElementById方法，该方法返回单个元素，getElementsByClassName返回元素的列表与那个班级。不要忘记一个元素也可以有多个类，例如<a class="offsite reference" ...>

如果您想知道CSS选择器如何解决目标所针对的规则与目标身份see this breakdown之间的冲突，后者链接到底部更详细的W3C文档。

Answer 2

根据W3c Recommendation's 7.5.2 Element identifiers: the id and class attributes：

id - [区分大小写] - 此属性为元素指定名称。这个名字必须是   在文档中是唯一的。

类 - [区分大小写] - 此属性为一个类名或一组类名指定   元件。可以是任意数量的元素   分配了相同的类名或名称。   必须分隔多个类名   用空格字符。

id属性分配唯一   元素的标识符。对于   例如，以下段落是   以他们的id值区分：

<P id="myparagraph"> This is a uniquely named paragraph.</P>
<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

id属性有几个角色   HTML：


作为样式表选择器。

作为超文本链接的目标主播。

作为从脚本引用特定元素的方法。

作为声明的OBJECT元素的名称。

用于用户代理的一般目的处理（例如用于识别   从HTML中提取数据时的字段   页面到数据库，翻译   HTML文档转换成其他格式，   等）。


另一个是class属性   手，分配一个或多个类名   一个元素;这个元素可以说   属于这些类。一类   名称可能由多个元素共享   实例。 class属性在HTML中有几个角色：


作为样式表选择器（当作者希望分配样式时）   信息到一组元素。）。

供用户代理进行一般处理。


在以下示例中，SPAN   元素与...结合使用   标记的id和class属性   文件信息。消息显示在   英语和法语版本。

<!-- English messages -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>

<!-- French messages -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

以下CSS样式规则告诉视觉用户代理显示信息性消息绿色，黄色警告信息，以及红色的错误消息：

SPAN.info    { color: green;  }
SPAN.warning { color: yellow; }
SPAN.error   { color: red;    }

请注意法语“msg1”和英文   “msg1”可能不会出现在同一文档中   因为它们共享相同的id值。作者   可以进一步使用id属性   完善个人的表达   消息，使它们成为目标锚点等。

几乎每个HTML元素都可以分配   标识符和类信息。

例如，假设我们正在写一篇文章   关于编程语言的文档。该   文件是包含一些   预先格式化的例子。我们使用PRE   元素来格式化示例。我们也   为所有人分配背景颜色（绿色）   属性的PRE元素的实例   到班级“例子”。

<HEAD>
<TITLE>....document title....</TITLE>
<STYLE type="text/css">
PRE.example { background : green; }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
....example code here....
</PRE>
</BODY>

通过为此设置id属性例如，我们可以（1）创建一个超链接它和（2）覆盖类风格具有实例样式信息的信息。

Answer 3

是的，您可以在标记中同时拥有这两个属性。您可能会对ID 值每个文档应该唯一的要求感到困惑吗？

Answer 4

绝对可以用于不同目的，无论是通过CSS选择器设置样式还是DOM操作等。使用两者都可以为您提供更多控制。

是否允许类AND id属性？

4 个答案: