为CSS目的使用id属性的原因是什么？

Question

我一直使用该class属性,从不id 用于CSS选择和样式.我知道id必须是唯一的,但这似乎不是将它用于CSS的理由.

我使用该id属性的唯一原因是JavaScript和表单标签.

我发现混合id和classCSS的目的可能导致混淆,对我而言,这是强制分离风格和行为的好方法.

是否有充分的理由id用于CSS目的？有没有可以实现什么id,不能做用class？

评论我发现有用/有趣

• 你可以对课程说同样的话.有很多JavaScript可以(并且必须)定位特定类的元素.从行为的角度来看,改变那些实例中的类同样存在问题. - AaronSieb
• ID在级联中具有与类不同的特异性. - Killroy
• 使用ID进行样式化是有意义的,如果它是一个没有重复的元素,特别是如果它出现在所有/大多数页面中 - RichN

Answer 1

使用ID进行样式化是有意义的,如果它是一个没有重复的元素,特别是如果它出现在所有/大多数页面中.

例如:

• 页眉和页脚
• 搜索框(你可以在那里看到的东西)
• 导航列表(类似于右边的东西)

Answer 2

选择具有唯一ID的任何内容都比使用类选择更快.差异可以忽略不计,但在具有大量DOM元素的应用程序或密集的Javascript应用程序中,它会产生影响.

例如,如果您使用jQuery,请检查:jquery性能规则

Answer 3

不,但如果你的元素有一个id为什么不用它来造型呢？

你可以对元素名称说同样的话 - 你无法做任何与p你无法做到的事情class='paragraph'.这并不意味着添加class='paragraph'到每个<p>元素是个好主意.

Answer 4

ID 识别,类分类.这一点在这里已经多次提到过,或多或少.

一个例子是:

<div class="author" id="stephen">[...]</div>

从CSS特异性的角度来看,目标ID将使CSS规则比具有类的规则更具体,甚至是几个类.

从而:

p#recent {}

比具体更具体

body>p.news.recent {}

当用户代理找到这两个时,第一个将占优势.

Answer 5

我使用 ID 标签的主要原因是与正在阅读我的代码的人进行交流。具体来说，ID 标签使他们可以轻松地引用他们想要的任何特定元素，并且完全放心，因为知道他们对其所做的任何更改只会影响该一个元素。

使用 ID 标签还有一个您可能不知道的技术原因。这些信息对于 CSS 新手来说非常有启发性。

下面的概述准确地说明了层叠样式表的“层叠”性质是如何工作的。在此大纲中，首先根据大纲的最高标准（即“1. Winner = !important statements ”）比较 2 个 CSS 样式。如果一种风格在这方面比另一种风格的优先级更高，那么它就会获胜。如果它们在这方面相同，请继续执行下一个标准，直到找到差异化因素。

1. 获胜者= ！重要声明。
   • 例如。#some-element {color: blue !important;}节拍#some-element {color: red;}。
2. 获胜者 =内联 CSS。
   • 例如。：
     • <div id="some-element" style="color: yellow;}">some content</div>节拍……
     • <style type="text/css">#some-element {color: red;}</style>和...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>。
3. 获胜者 = 最大数量的ID选择器。
   • 例如。#some-element#id-2 {color: blue;}节拍#some-element {color: red;}。
4. 获胜者=类、伪类和其他属性选择器的最大数量。
   • 例如。.some-elements.class-2 {color: blue;}节拍.some-elements {color: red;}。
5. 获胜者 =选择器中 元素名称和伪元素的最大数量。
   • 例如。#some-element:hover {color: blue;}节拍#some-element {color: red;}。
6. 获胜者 =机器 最近读取的内容。
   • 例如。：
     • <style type="text/css">#some-element {color: red;}</style>节拍……
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>因为内部CSS是在外部CSS之后读取的。