我可以在CSS中多次应用ID吗?

我可以在CSS中多次应用ID吗?,css,html,xhtml,Css,Html,Xhtml,这是一个初学者的问题,但我需要澄清一下。 是的,根据大多数教程,它不能应用多次 ID是唯一的 每个元素只能有一个ID 每个页面只能有一个ID为的元素 参考文献 但我用HTML编写了一个简单的标记,并应用了一些CSS 这是我的密码 HTML <!DOCTYPE html> <html> <head> <title>ID vs Classes</title> <link rel="stylesheet" type="

这是一个初学者的问题,但我需要澄清一下。 是的,根据大多数教程,它不能应用多次

ID是唯一的
每个元素只能有一个ID
每个页面只能有一个ID为的元素

参考文献

但我用HTML编写了一个简单的标记,并应用了一些CSS

这是我的密码

HTML

<!DOCTYPE html>
<html>
<head>
    <title>ID vs Classes</title>
    <link rel="stylesheet" type="text/css" href="ID & Classes.css">
</head>
<body>
    <h1 id="forh1">This is a h1 header</h1>
    <p>Lorem ipsum dolor sit amet</p>

    <h1 id="forh1">This is a h1 header</h1>

    <p>Curabitur sodales ligula</p>

    <h2 id="forh1">This is a h2 header</h2> 
</body>
</html>

我已多次(3次)应用同一ID。两次在h1收割台,一次在h2收割台。当我在浏览器(chrome和firefox)中运行它时,它们工作得非常好。h1和h2标题中的所有文本均居中对齐。为什么呢?我是否正确理解了ID的概念,或者这是浏览器的问题?因为我听说现代浏览器足够聪明,可以理解大多数隐含的东西。请帮助。

您可以多次使用ID。浏览器仍将应用这些样式。然而,这样做并不是最佳实践,它被归类为无效标记

为了解决这个问题,您可以向元素添加一个类。类可以在任意多个元素上使用


检查并抛出错误
重复ID

ID用于唯一地标识元素,它们将在CSS的范围内工作,但当JavaScript开始运行时,您将理解为什么不这样做

CSS只是选择元素,当您编写匹配的选择器时,它与您编写的有效或无效HTML无关,CSS的工作是根据定义的选择器应用样式。比如说

无效HTML,请勿使用它(仅用于演示)


因此,
ID
应该是唯一的,如果要在多个元素上使用相同的属性,请使用
class

此属性为元素指定名称。此名称必须是唯一的 在文件中


侧边提示:使用
\uu
而不是空格
href=“ID&Classes.css”
应该是
href=“IDs\u Classes.css”


(所以这里不再重复)

我建议首先将css应用到您的标签上,因为这会使更新页面更加容易

h1 {

 text-align:center;

}

回答您的问题:是的,您可以多次应用IDs,正如您的测试所证明的那样

然而


即使这在现代浏览器中的测试中能像预期的那样工作,也不能保证它能在旧浏览器或IE中工作。您也不能保证像getElementByID这样的javascript函数能够按预期工作。正如其他人所回答的:html中的多个ID被认为是错误的做法,是对类和ID概念的滥用

用于Html和Css:-
在CSS代码页中,
考虑一下,您已经为ID创建了一个样式。 在Html页面中,
您可以根据自己的意愿多次应用该ID的样式
但是,对于Javascript和JQuery:-
如果对多个字段使用相同的ID,则无法验证该字段
因为,ID必须是唯一的,才能在Javascript和JQuery上执行操作


我希望您能理解。

请使用
而不是
id
此外,不建议在文件名中使用空格和特殊字符。如果您想在JS中使用
getElementById
获取元素,祝您好运。问题是,为什么断开的标记与CSS一起工作(或似乎工作)。这是推测性的和理论性的,不是实际的编码问题。如果问题是如何将一些CSS规则仅应用于某些选定的元素,那么问题的主题将是(尽管是重复的)。有。除CSS选择器外,所有都需要唯一性。在所有其他情况下,只有第一个id匹配的元素。JavaScript不关心您看似正常工作的CSS-JavaScript会因此伤害您。在中,getElementById当前保证按文档顺序返回第一个id匹配的元素;该行为未在DOM级别2/3中定义。(我不知道哪些浏览器/版本符合“生活标准”。)
h1 {

 text-align:center;

}