2

使用元素的 id 设置元素的样式是不好的做法,还是应该设置引用适当 css 的每个元素的样式?

<div id="test">
</div>

相对 :

<div id="test" class="testClass">
</div>

#test{
color:blue;
}

.testClass {
color:blue
}
4

7 回答 7

5

这不是一个坏或好的做法。选择器的用途id不同于class.

如果您打算只为这一个元素设置样式而不在其他任何地方重复使用样式 -id您可以选择。如果你需要很多相似的div-s 来拥有相同的风格 - 使用class

于 2012-07-27T10:59:59.077 回答
2

id vs 类

ID #

ID 在文档中必须是唯一的,通常用于使用 document.getElementById 检索元素。

在某些文档(特别是 HTML、XUL 和 SVG)中,可以将元素的 id 指定为元素的属性,如下所示: .

但是,如果没有在 DOCTYPE 中正确指定 id 属性的类型,就不能在自定义 XML 文档中使用此属性。

id 的其他常见用法包括在使用 CSS 设置文档样式时使用元素的 ID 作为选择器。

请注意,ID 区分大小写,但您不应创建仅大小写不同的 ID(请参阅类和 id 名称中的区分大小写)。

班级 .

将一个类名或一组类名分配给一个元素。您可以为任意数量的元素分配相同的类名称或名称。如果您指定多个类名,它们必须用空格字符分隔。

元素的类名有两个关键作用:

作为样式表选择器,当作者想要将样式信息分配给一组元素时使用。供浏览器一般使用。该类可用于使用 CSS 设置 SVG 内容的样式。

于 2012-07-27T11:01:01.207 回答
1

ID 本质上与类相同,ID 稍快一些,但只能用于一个元素,而类可以用于多个元素。

于 2012-07-27T10:56:30.493 回答
0

如果您希望多个元素具有蓝色,那么您需要使用一个类,否则一个 id 就可以了。

于 2012-07-27T10:58:01.847 回答
0

ID 是唯一的。您的页面上应该只有一个具有该 ID 的元素。在造型方面,我不认为这是不好的做法,但 ID 在特异性方面获胜。基本上,选择器越具体,当涉及到冲突样式时,它就会越优先,因此应用于 ID 的任何样式都会覆盖任何其他样式。

p has a specificity of 1 (1 HTML selector)
div p has a specificity of 2 (2 HTML selectors; 1+1)
.tree has a specificity of 10 (1 class selector)
div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
#baobab has a specificity of 100 (1 id selector)
body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
于 2012-07-27T11:00:42.970 回答
0

这不是一个坏习惯,但这取决于您的用途。

如果你为页面中的每个元素设置一些规则,很快就无法理解发生了什么,你的 css 变成了一个很长的文件。

定义一个类允许多个元素使用同一组规则,因此您应该设计您的页面以允许这样的行为。

通常,您应该混合策略,例如,您可以使用 id 为页面的一些“重要”元素设置样式,例如页眉、页脚、正文等,而其他部分或组件应对齐使用类。

于 2012-07-27T11:04:29.710 回答
0

我不认为,如果您在样式上使用 ID 或 Class 会产生很大的不同。类选择器用于指定一组元素的样式。与 id 选择器不同,类选择器最常用于多个元素。

有关更多参考,您可以查看此链接

http://css-tricks.com/the-difference-between-id-and-class/

在 JavaScript 中,ID 起着重要的作用。如果您使用 ID 搜索任何 DOM 元素,那么搜索会更快,因为 JavaScript Parser 返回相应页面上具有该 ID 的第一个元素的值。而如果你使用 Class 然后 JS 搜索整个页面并收集该类的所有元素。因为这个搜索变得有点慢。

于 2012-07-27T11:07:33.920 回答