id 和 class 有什么区别？

StackOverflow https://stackoverflow.com/questions/544010

  •  23-08-2019
  •  | 
  •  

题

有什么区别 <div class=""> 和 <div id=""> 当谈到 CSS 时？可以用吗 <div id="">?

我看到不同的开发人员以两种方式这样做，而且由于我是自学的，所以我从未真正弄清楚。

有帮助吗？

解决方案

ids 必须是唯一的，其中 class 可以应用到很多事情上。在CSS中， id看起来像 #elementID 和 class 元素看起来像 .someClass

一般来说，使用 id 每当您想引用特定元素并且 class 当你有很多相似的东西时。例如，常见的 id 元素是这样的东西 header, footer, sidebar. 。常见的 class 元素是这样的东西 highlight 或者 external-link.

阅读级联并了解分配给各种选择器的优先级是个好主意： http://www.w3.org/TR/CSS2/cascade.html

然而，您应该理解的最基本的优先顺序是 id 选择器优先于 class 选择器。如果你有这个：

<p id="intro" class="foo">Hello!</p>

和：

#intro { color: red }
.foo { color: blue }

文本会是红色的，因为 id 选择器优先于 class 选择器。

其他提示

也许一个类比将有助于理解其中的差异：

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

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

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

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

“明天，所有学生都必须穿红衬衫去上生物课。”

.Biology {
  color: red;
}

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

“乔纳森·桑普森明天将穿绿色衬衫。”

#JonathanSampson {
  color: green;
}

在本例中，Jonathan Sampson 收到两个命令：一个是生物课上的学生，另一个是直接要求。因为通过 id 属性直接告诉 Jonathan 要穿绿色衬衫，所以他将忽略之前穿红色衬衫的请求。

更具体的选择器获胜。

哪里使用 ID 和类

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

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

id 在整个页面中必须是唯一的。

一个类可以应用于许多元素。

有时，使用 ids 是个好主意。

在一个页面中，通常有一个页脚，一个页眉......

然后页脚可能会进入一个带有id的div

<div id="页脚" class="...">

还有课

A 班级 应该用于您想要相同样式的多个元素。一个 ID 应该是一个独特的元素。看到这个 教程.

您应该参考 W3C 标准 如果您想成为一个严格的墨守成规者，或者如果您希望您的页面 已验证 达到标准。

ID 是唯一的。课程不是。元素也可以有多个类。类也可以动态地添加到元素中或从元素中删除。

任何可以使用 ID 的地方都可以使用类。反之则不然。

约定似乎是对每个页面上的页面元素（如“导航栏”或“菜单”）使用 ID，对其他所有内容使用类，但这只是约定，您会发现使用情况存在很大差异。

另一个区别是，对于表单输入元素， <label> 元素通过 ID 引用字段，因此如果要使用，则需要使用 ID <label>. 。是一个可访问性的东西，你真的应该使用它。

在过去的几年里，ID 也是首选，因为它们可以在 Javascript 中轻松访问（getElementById）。随着 jQuery 和其他 Javascript 框架的出现，这现在几乎不再是问题了。

类就像类别。许多 HTML 元素可以属于一个类，并且一个 HTML 元素可以有多个类。类用于应用通用样式或可跨多个 HTML 元素应用的样式。

ID 是标识符。他们是独一无二的；任何人不得拥有相同的 ID。ID 用于将独特的样式应用于 HTML 元素。

我以这种方式使用 ID 和类：

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

在此示例中，标题和内容部分可以通过#header 和#content 设置样式。内容的每个部分都可以通过#content .section 应用通用样式。只是为了好玩，我为中间部分添加了一个“特殊”类。假设您希望某个特定部分具有特殊的样式。这可以通过 .special 类来实现，但该部分仍然继承#content .section 的常见样式。

当我进行 JavaScript 或 CSS 开发时，我通常使用 ID 来访问/操作非常具体的 HTML 元素，并使用类来访问/将样式应用到广泛的元素。

CSS 是面向对象的。ID表示实例，class表示类。

CSS 选择器空间实际上允许条件 id 样式：

h1#my-id {color:red}
p#my-id {color:blue}

将按预期呈现。你为什么要这样做？有时ID是动态生成的，等等。进一步的用途是根据高级 ID 分配以不同方式呈现标题：

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

就我个人而言，我更喜欢更长的类名选择器：

body#list-page .title-block > h1 {font-size:56px}

因为我发现使用嵌套 ID 来区分处理有点反常。只需要知道，作为开发者 萨斯/社会保障体系 全世界都掌握了这些东西，嵌套 ID 正在成为常态。

最后，当谈到选择器性能和优先级时，ID 往往会胜出。这完全是另一个话题了。

应用 CSS 时，将其应用于类并尽量避免应用于 id。ID 只能在 JavaScript 中用于获取元素或用于任何事件绑定。

应该使用类来应用 CSS。

有时您确实必须使用类来进行事件绑定。在这种情况下，请尝试避免用于应用 CSS 的类，而添加没有相应 CSS 的新类。当您需要更改任何类的 CSS 或更改任何元素的 CSS 类名称时，这将很有帮助。

任何元素都可以有一个类或一个 id。

类用于引用某种类型的显示，例如，您可能有一个代表此问题答案的 div 的 css 类。由于会有很多答案，多个 div 需要相同的样式，并且您将使用一个类。

id 仅指单个元素，例如右侧的相关部分可能具有特定于它的样式而不在其他地方重用，它将使用 id。

从技术上讲，您可以对所有这些使用类，或者从逻辑上将它们分开。但是，您不能对多个元素重复使用 id。

类用于将您的样式应用到一组元素。ID 样式仅适用于具有该 ID 的元素（应该只有一个）。通常您使用类，但如果有一次性的情况，您可以使用 ID（或者直接将样式粘贴到元素中）。

高级开发中 ID我们基本上可以使用 JavaScript。

为了可重复的目的， 班级es 很方便，相反 IDs 应该是唯一的。

下面是一个例子来说明上面的表达式：

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

现在你可以在这里看到 box 和 box1 两 (2) 不同 <div> 元素，但我们可以应用 box 和 bg-color-red 给他们俩上课。

这个概念是继承 面向对象编程 语言。

1) div id 不可重用，只能应用于 HTML 的一个元素，而 div 类可以添加到多个元素。

2) id 更重要，如果两者应用于同一元素且样式冲突，则将应用 id 的样式。

3) 样式元素总是通过放置 .div 来引用 div 类。（点）在他们的名字前面，而 ​​div id class 通过在他们的名字前面放一个#（散列）来引用。

4) 示例：-

班级在 <style> 宣言 - .red-background { background-color: red; }

身份证号在 <style> 宣言 - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div>这里的背景将是蓝色的

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top