是否允许在同一HTML标记中同时具有class AND id属性？
<p id='a' class='b'>
我知道有关于每页一个id的规则,并且标签中允许多个类,但我没有看到有关类和ID的任何内容.
Pau*_*xon 11
是的,这很好,非常正常.
id允许您直接引用该元素.该类在那里说"这个元素就像这个类的其他元素".这是关于差异的方便教程.
为了进一步说明,请考虑Javascript提供一个返回单个元素的getElementById方法,以及返回该类元素列表的getElementsByClassName.不要忘记一个元素也可以有多个类,例如<a class="offsite reference" ...>
如果您想知道CSS选择器如何解决目标所针对的规则与目标ID之间的冲突,请参阅此细分,该细分链接到底部更详细的W3C文档.
根据W3c Recommendation的7.5.2元素标识符:id和class属性:
id - [区分大小写] - 该属性为元素指定名称.该名称在文档中必须是唯一的.
class - [区分大小写] - 此属性为元素分配类名或类名.可以为任意数量的元素分配相同的类名或名称.多个类名必须用空格字符分隔.
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éclarée deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable indé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)使用实例样式信息覆盖类样式信息.