•  01-07-2019
  •  | 
  •  

题

使用 div 时什么时候使用 class 与 id 最好？

最好在 html 中的字体变体或元素上使用类吗？然后使用 id 来表示结构/容器？

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

有帮助吗？

解决方案

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

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

其他提示

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

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

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

想想大学。

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

学生 ID 卡是不同的。校园里不会有两个学生有同一个学生 ID 卡片。然而，许多学生可以并且愿意分享至少一项 班级 与彼此。

将多个学生归为一个学生是可以的 班级 标题，生物学 101。但将多个学生置于一个学生之下是绝对不可接受的 ID.

给予时 规则 通过学校对讲系统，您可以给 规则 到一个 班级:

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

.BiologyClass {
  shirt-color:red;
}

或者，您可以通过调用特定学生的独特规则来为他制定规则 ID:

“乔纳森·桑普森明天可以穿绿衬衫吗？”

#JonathanSampson {
  shirt-color:green;
}

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

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

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

文本将为白色。

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

使用 ID 的另一个好处是能够将其定位到锚标记中：

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

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

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

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

同样重要的是要记住，id 有更严格的命名规则，主要是它们不能以数字开头。请参阅类似的问题： html 中 id 属性的有效值是多少

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

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

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

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

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

  • 使用 ASP.Net 时，您无法完全控制元素的 ID，因此您几乎必须使用类（请注意，这不像以前那样正确）。

  • 最好使用 两者都不, ，当你能帮忙的时候。相反，指定 元素类型 这是 父母的类型. 。例如，包含在具有 navarea 类的 div 内的无序列表可以通过以下方式挑选出来：

    div.NavArea ul { /* styles go here */ }

现在您可以设置样式 逻辑划分 通过一类应用程序即可覆盖整个导航区域的大部分区域。

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

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

在为 ID 和 CLASS 编写 css 时，尽可能使用最少的 css 类是有益的，并且除非必要，否则尽量不要使用过多的 ID，否则您将不断致力于编写更强大的声明和很快就会有一个充满 !important 的 css 文件。

哪里使用 ID 和类

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

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

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

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

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

使用 id 表示页面上您想要执行特定操作的唯一元素，使用类表示可以在页面其他部分重用的元素。

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

所以，实际上，如果每个文档只有一个元素要使用该样式（例如#title），那么就使用 ID. 。如果多个元素可以使用该样式，请使用 班级.

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

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

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

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

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

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

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

同样，您赋予特定 id 的元素可以通过 JavaScript 和 DOM 命令（例如 GetElementById）进行操作。

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

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

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

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

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

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

因此，您可能应该将 ID 用于诸如标题、“侧边栏”或其他内容等 - 每页仅出现一次的内容。

为我 ： 如果在 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;}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top