Question

我想知道html和css中id和class之间的确切区别。

我在某处读到了id是唯一的，并且只有一个元素具有相应的id，并且类可以应用于许多元素。

但我认为这是错误的我有一个代码，我已经将一个id应用于两个元素。

＆＃13;

<link type="text/css" href="main.css" rel="stylesheet">
</head>

<body id="header">

<p id="header2">Poster</p>

<p id="header2">Hello World</p>

</body>

</html>

＆＃13;

这是我的css代码

＆＃13;

	
	p#header2{
	background-color:white;
	width:50%;
	height:50%;
	margin-left:25%;
	margin-right:25%;
	text-align:center;
	font-size:50px;
}

＆＃13;

有人可以解释一下吗???

Answer 1

以下是 Explanation 。

如果要在整个页面/网站中始终设置多个元素的样式，请使用类。如果页面上有一个将采用该样式的元素，请使用 ID 。类是一种商品， id 是商品的唯一名称。

编辑：

CSS并不关心

关于CSS，您无法对ID使用Class做任何事情，反之亦然。我记得当我第一次学习CSS时我遇到了问题，有时我会尝试通过切换这些值进行故障排除。不。 CSS并不关心。

Javascript关心

JavaScript人们可能已经更加了解classes和ID's之间的差异。 JavaScript依赖于只有一个具有任何特定的页面元素，否则常用的getElementById函数将不可靠。对于那些熟悉jQuery的人，您知道向页面元素添加和删除classes是多么容易。它是jQuery的原生和内置功能。注意ID's如何不存在这样的函数。操纵这些价值不是JavaScript的责任，它会导致更多的问题而不是它的价值。

EDIT2：

Documentation清楚地表明HTML要求 ID 属性在页面中是唯一的：

此属性为元素指定名称。该名称在文档中必须是唯一的。如果您有多个具有相同 ID 的元素，则 HTML 无效。

所以在JavaScript中，getElementById()应该只返回一个元素。你不能让它返回多个元素。

好吧，你可以拥有多个具有相同ID的元素，但是你不应该 - 因为浏览器之间存在差异，这样做的后果是不可预测的。

Answer 2

ID：Id名称必须为1。

<link type="text/css" href="main.css" rel="stylesheet">
</head>
<body id="header"> // ID
<p id="header2">Poster</p>
<p id="header2">Hello World</p>
</body>
</html>

类：具有使用相同类名的多标记。并且您可以为所有类应用样式，名称为“name”。

<p class = "name">abcdef</p>
<image class = "name">......</image>

Answer 3

id属性意味着是唯一的，并且应包含单个标识符。 class属性可能包含以空格分隔的类标识符列表，允许累积应用css规则。

尽管css引擎不会抱怨双重ID。

Answer 4

没错：

元素的id在整个dom中应该是唯一的。该类可以应用于多个元素。

如果您使用此语法，请在css中

.yourClass {
    color: white;
}

class =“yourClass”的每个元素都有样式颜色：白色。

由于不同的原因，ID必须是唯一的。我首先想到的是使用jquery来识别带有ID的dom元素

Answer 5

简单 - id只能使用一次，它将是唯一的。脚本大多使用id，但这并不意味着id只能用于js而不能用于css。您可以在css中使用id作为选择器。

当两个或多个div具有相同样式的类时，使用类而不是增加代码行。

html / css中id和class有什么区别

5 个答案:

编辑：

EDIT2：