Question

我正在经历CSS :Class and ID。当我尝试他们给出的例子时，我不会觉得它们之间存在任何差异。

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
} 
</style>
</head>

<body>
<h1 id ="para1">Hai</h1>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

按照我的意愿给出输出 id id选择器用于指定单个唯一元素的样式。

我是以错误的角度看待这个吗？

Answer 1

一个唯一标识，另一个分类。

在第一种情况下，将两件事情称为同一件事是无稽之谈。

在第二种情况下，通常希望给一组具有相同外观的东西。

在CSS的上下文中，您应该只依赖于类。 CSS的验证器应该不使用id来应用样式。您仍然可以定义仅由一个不同元素使用的唯一样式。

Answer 2

首先，w3schools is a terrible resource。它写得很糟，杂乱，没有焦点，而且经常会产生误导。你应该使用this much better set of resources at the Mozilla Developer Network instead（它开始实现同样的目的）。

您的示例根本不使用类。您有CSS调用ID，以及2个带有该ID的HTML元素（您不应该这样做 - ID应该是唯一的！）。 2：

之间的关键区别

ID引用唯一元素。任何1个ID应该只有1个实例。类可以应用于许多元素，元素可以有多个class es
使用ID的CSS规则将覆盖带有类的CSS规则，如果它们都尝试分配相同的属性。
ID用于各种本机应用程序：锚引用，表单，iframe，而类仅用于CSS样式。

I modified your code as an example of these points。以下是一些使用类进行参考的代码：

.paragraph {
    font-style: italic;
    color: green;
}

HTML：

<p id="para1" class="paragraph">Blah blah blah</p>

Answer 3

您可以使用两者来设置元素样式，但差异很小：

只有一个元素具有给定的id，但许多元素具有给定的类
id选择器在CSS优先级计算期间计数为100，此时类选择器仅为10

Answer 4

以下是 Explanation 。

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

编辑：

CSS无关紧要

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

Javascript关心

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

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

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

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

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

Answer 5

在CSS中，类选择器是一个以句号（“。”）开头的名称，而ID选择器是一个以井号（“＃”）开头的名称。 ID与类之间的区别在于，ID可用于标识一个元素，而类可用于标识多个元素。

Answer 6

类选择器是一个以句号（“。”）开头的名称，而ID选择器是一个以井号（“＃”）开头的名称。 ID与类之间的区别在于，ID可用于标识一个元素，而类可用于标识多个元素。

尽管CSS可能并不是真的在乎ID的唯一性，但是JavaScript会这么做，这就是为什么当您在JavaScript中处理文档对象模型时，如果要tp选择html ID，请使用document.getElementByID（），请注意“元素”，而在上课时，您使用document.getElementsByClassName（）则具有“元素”。

Answer 7

您具有将一个人与另一个人区分开的ID的方式与它在CSS中的工作方式相同，就像您给某项加了特殊标记，以免您将其与另一个混淆，这就是ID在CSS中的工作方式，更多一个项目不能共享相同的ID

Answer 8

ID对于一个元素是唯一的，一个元素只能有1个ID。类可以应用于许多元素，并且一个元素可以同时具有多个类

ID和类之间的区别

8 个答案:

编辑：