css - div的类与id

Question

什么divs时候最好使用classvs id？

最好使用class, 说字体变体或 html 中的元素？然后id用于结构/容器？

这是我一直有点不确定的事情，任何帮助都会很棒。

score 85 · Accepted Answer

用于id标识页面上只有一个实例的元素。例如，如果您将单个导航栏放置在特定位置，请使用id="navigation".

用于class对所有行为都以某种方式的元素进行分组。例如，如果您希望您的公司名称在正文中以粗体显示，您可以使用<span class='company'>.

score 51 · Accepted Answer

要理解的最重要的事情是 ID 必须是唯一的：页面中只能存在一个具有给定 ID 的元素。因此，如果您想引用特定的页面元素，这通常是最好的选择。

如果你有多个元素在某种程度上相似，你应该使用元素类来识别它们。

一个非常有用但鲜为人知的事实是，您实际上可以通过在类名之间放置空格来将多个类应用于单个元素。因此，如果您发布了由当前登录用户编写的问题，您可以使用<div class="question currentAuthor">来识别它。

score 33 · Accepted Answer

想想大学。

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

学生证是不同的。校园里没有两个学生会拥有同一张学生证。但是，许多学生可以并且将彼此共享至少一个班级。

可以将多个学生放在一个班级名称下，即生物 101。但是将多个学生放在一个学生ID下是绝对不能接受的。

在学校对讲系统上给出规则时，您可以将规则分配给班级：

“明天生物课可以穿红衫吗？”

.BiologyClass {
  shirt-color:red;
}

或者，您可以通过调用特定学生的唯一ID来为特定学生提供规则：

“请乔纳森·桑普森明天穿一件绿衬衫好吗？”

#JonathanSampson {
  shirt-color:green;
}

score 24 · Accepted Answer

ID 必须是唯一的，但在 CSS 中，它们在确定要遵循的两个冲突指令中的哪一个时也具有优先权。

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

文本将是白色的。

score 7 · Accepted Answer

使用 ID 的另一个好处是能够在锚标记中定位它：

<h2 id="CurrentSale">Product I'm selling</h2>

将允许您在其他地方直接链接到页面上的该位置：

<a href="#CurrentSale">the Current Sale</a>

这样做的一个常见用途是为博客上的每个标题提供一个带日期戳的 ID（比如 id="date20080408"），这将允许您专门针对博客页面的该部分。

同样重要的是要记住，id 的命名规则更受限制，主要是它们不能以数字开头。请参阅类似的 SO 问题：What is a valid value for id attributes in html

score 6 · Accepted Answer

当您想将相似的样式应用于许多不同的 div 或元素时，类非常有用。当您想要处理用于格式化或使用 javascript 更新的特定元素时，id 非常有用。

score 4 · Accepted Answer

HTML 标准本身回答了您的问题：

没有两个对象可能具有相同的 ID，但任意数量的对象可能具有相同的类。

因此，如果您只想将某些 CSS 样式属性应用于单个 DIV，那将是一个 ID。如果您希望某些样式属性应用于多个 DIV，那必须是一个类。

请注意，您可以将两者混合使用。您可以让两个 DIV 属于同一个类，但给它们不同的 ID。然后，您可以将两者通用的样式应用于类，并将特定于任何一个的事物应用于它们的 ID。浏览器将首先应用类样式，然后是 ID 样式，因此 ID 样式可以覆盖类之前设置的任何内容。

score 3 · Accepted Answer

其他一些需要记住的事情：

使用 ASP.Net 时，您无法完全控制元素的 ID，因此您几乎必须使用类（请注意，这不像以前那样正确）。
最好两者都不使用，当您可以提供帮助时。相反，指定元素类型及其父类型。例如，包含在 div 中的具有 navarea 类的无序列表可以通过以下方式单独列出：
```
div.NavArea ul { /* styles go here */ }
```

现在，您可以使用一个类应用程序为整个 navarea 的大部分设置逻辑划分样式。

score 2 · Accepted Answer

ID 应该是唯一的。类应该是共享的。因此，如果您有一些将应用于多个 DIV 的 CSS 格式，请使用一个类。如果只有一个（作为要求，而不是偶然），请使用 ID。

score 1 · Accepted Answer

我想我们都知道类是什么，但如果你将 ID 视为标识符而不是样式工具，那么你就不会大错特错。尝试定位某物时需要一个标识符，如果您有多个具有相同 ID 的项目，则无法再识别它...

在为 ID 和 CLASS 编写 css 时，尽可能使用最少的 css 类是有益的，并且在你必须这样做之前尽量不要让 ID 变得太重，否则你将一直致力于编写更强大的声明和很快就会有一个充满 !important 的 css 文件。

score 1 · Accepted Answer

在哪里使用 ID 与类

两者之间的简单区别在于，虽然一个类可以在一个页面上重复使用，但一个 ID 每页只能使用一次。因此，在标记页面主要内容的 div 元素上使用 ID 是合适的，因为只有一个主要内容部分。相反，您必须使用一个类来设置表格上的交替行颜色，因为根据定义它们将被多次使用。

ID 是一个非常强大的工具。具有 ID 的元素可以是一段 JavaScript 的目标，该 JavaScript 以某种方式操纵该元素或其内容。ID 属性可以用作内部链接的目标，将锚标记替换为名称属性。最后，如果您使您的 ID 清晰且合乎逻辑，它们可以作为文档中的一种“自我文档”。例如，如果块的开始标签的 ID 为“main”、“header”、“footer”，则不必在块之前添加注释说明代码块将包含主要内容“， ETC。

score 0 · Accepted Answer

如果它是您想在页面的多个位置使用的样式，请使用类。如果您想要对单个对象进行大量自定义，例如页面一侧的导航栏，那么 id 是最好的，因为您不太可能在其他任何地方需要这种样式组合。

score 0 · Accepted Answer

id 应该是页面上的元素唯一标识符，这有助于对其进行操作。任何应该在多个元素中使用的外部 CSS 定义的样式都应该使用 class 属性

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

score 0 · Accepted Answer

将 id 用于页面上您想要做一些非常具体的事情的唯一元素，并为您可以在页面的其他部分重用的东西使用类。

score 0 · Accepted Answer

id属性用于元素在文档中唯一标识它们，而class属性可以具有由同一文档中的许多元素共享的相同值。

所以，真的，如果每个文档只有一个元素将使用该样式（例如，#title），那么使用id。如果多个元素可以使用该样式，请使用class。

score 0 · Accepted Answer

我会说，每当您认为样式元素将在页面上重复时，最好使用一个类。像 HeaderImage、FooterBar 之类的项目很适合作为 ID，因为您只会使用它一次，并且它有助于防止您意外复制它，因为当您有重复的 ID 时，一些编辑器会提醒您。

如果您要动态生成 div 元素并希望针对特定项目进行格式化，我也可以看到它很有帮助；您可以在生成时为其提供正确的 ID，而不是搜索元素然后更新其类。

score 0 · Accepted Answer

类用于您可以在页面上多次使用的样式，ID 是定义元素特殊情况的唯一标识符。标准规定，ID 只能在页面中使用一次。因此，当您想在页面中的多个元素上使用样式时，您应该使用类，而当您只想使用一次时，您应该使用 ID。

另一件事是，对于类，您可以使用多个值（通过在每个类之间放置空格，a la "class='blagh blah22 blah'）而带有 ID，您只能在每个元素的 ID 上使用。

为 ID 定义的样式会覆盖为类定义的样式，因此在中，#uniquething 的样式设置将覆盖 .whatever 的样式，如果两者发生冲突。

因此，您可能应该将 ID 用于诸如标题、“侧边栏”之类的东西，等等——每页只出现一次的东西。

score 0 · Accepted Answer

我的选择是在以相同方式将 css 样式应用于多个 div 时使用类标识。如果结构或容器真的只应用一次，或者可以从默认继承其样式，我认为没有理由使用类标识。

所以这取决于你的 div 是否是几个之一；例如，一个 div 表示对 stackoverflow 网站上答案的问题。在这里，您需要为“Answer”类定义样式并将其应用于每个“Answer”div。

score 0 · Accepted Answer

如果您使用的是 .Net Web 控件，那么有时仅使用类会容易得多，因为 .Net 在运行时会更改 Web 控件 div id（它们使用 runat="server"）。

使用类可以让您轻松地使用单独的字体、间距、边框等类来构建样式。我通常使用多个文件来存储不同类型的格式信息，例如 basic_styles.css 用于简单的站点范围格式设置，ie6_styles.css 用于浏览器特定样式（在本例中为 IE6）等和 template_1.css 用于布局信息。

无论您选择哪种方式，都尽量保持一致以帮助维护。

score 0 · Accepted Answer

同样，可以通过 JavaScript 和 DOM 命令（例如 GetElementById）来操作您提供特定 id 的元素。

总的来说，我发现给所有主要的结构 div 一个 id 是很有用的——即使最初我没有任何特定的 CSS 规则可以应用，但我将来也有这种能力。另一方面，我为那些可以多次使用的元素使用类——例如，一个包含图像和标题的 div——我可能有几个类，每个类的样式值略有不同。

但请记住，在所有条件相同的情况下，id 规范中的样式规则优先于类规范中的样式规则。

score 0 · Accepted Answer

除了 id 和 classes 非常适合在单个项目上设置样式与一组类似的项目，还有另一个需要记住的警告。这在某种程度上也取决于语言。在 ASP.Net 中，您可以输入 Div 并拥有 id。但是，如果您使用 Panel 而不是 Div，您将丢失 id。

score 0 · Accepted Answer

对我来说：如果在我将在 CSS 中做某事或为元素添加名称并可以在页面中的所有元素中使用时使用类。

所以我用于唯一元素的 ID

前任：

<div id="post-289" class="box clear black bold radius">

CSS：

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}

css - div的类与id

22 回答 22

想想大学。

在哪里使用 ID 与类

Related

Reference