Question

我一直在关注有关CSS的SitePoint书籍。

让我了解这些例子的是使用ID作为CSS选择器。

我已经完成了一些CSS设计，我总是发现使用Class作为选择器更容易，更通用。

也许它是一个.Net的东西，因为我们并不总是能控制元素的ID ......

这里最好使用CLASS或ID作为选择器吗？

Answer 1

我猜他们总是在示例中使用id，因为它不那么模糊。你知道他们正在特别谈论那个一个元素及其风格。

一般来说，经验法则是你应该问自己：“现在或将来的任何时候，是否存在多个需要相同风格的元素？”，答案甚至是“可能”，然后把它变成一个班级。

Answer 2

不要忘记类和 ID 不是互斥的。没有什么可以阻止你两者兼得！这有时非常有用，因为它允许项目继承常见样式以及同一类的其他元素，并使您可以精确控制该特定项目。另一个方便的技术是将多个类应用于同一个对象（是的，class="someClass someOtherClass"完全有效）例如：

<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 40em; 
}

div.narrow {
width: 10em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>

理论上，也可以将CSS仅应用于属于多个类的项目，例如div.box.narrow {something: somevalue;}但遗憾的是，并非所有浏览器都支持此功能。 更新2011：多个类选择器现在具有接近通用的浏览器支持，因此请继续使用它们！

Answer 3

不要忘记您可以链接到ID 的元素。除了其他好处之外，这对于可访问性非常重要。对于标题，导航，主要内容，页脚，搜索表单等布局元素，这是一个很好的理由，您应该始终使用ID而不是Class（或与Class一起使用）。

Answer 4

另一个有用的资源是W3C spec on Cascading Order：id选择器被赋予十倍 class选择器的权重。如果您计划根据不同的方案或状态更改覆盖样式，这一点尤为重要。初始选择器越具体，在额外的声明中覆盖它就需要做的工作就越多。

Answer 5

这种做法取决于您要选择的“解决方案”。

当我想要改变一大堆元素时，我会使用类。 ID给我一个更细粒度的控制，有时是必要的。

Answer 6

ID选择器具有很高的特异性，这通常是CSS中所需要的。您可以将CSS更准确地应用于CSS渲染器在建立规则时必须做的工作所需的CSS。

设计到任务，并以OO方式执行 - 使用对象类的类，用于定位实例的ID，并将标记引用视为类似接口（并注意何时）你这样做了！）。这是我能想到的最好的做法。

编辑：是的，MS真的用ASP.NET支持CSS，感谢大家！

Answer 7

当您总是在谈论网站的单个（并且永远是单个）时，您应该使用“id”。

基本上，它归结为语义。

div.header

这告诉我你的网站允许多个“标题”。也许这些是子标题。

div#header

这告诉我你正在谈论网站布局的单个“标题部分”。

编辑：这是一篇关于Pure CSS设计的半旧文章......如果您只是扫描CSS示例，您会看到我在那里使用ID的原因：How To: Pure CSS Design

Answer 8

ID用于唯一标识元素，类用于将元素标识为元素类的一部分。

实际上，id属性应该只用于每个文档一个，类属性可以用在文档上的多个元素上。

查看此问题的W3C spec和CSS-Discuss页。

Answer 9

我更喜欢使用Class作为选择器，因此我可以在同一页面上使用多个元素。使用id作为选择器，不允许这样做，因为id必须是唯一的。

Answer 10

请参阅：

不要在CSS中使用ID选择器：http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

不要在CSS选择器中使用ID？：http://oli.jp/2011/ids/

Answer 11

只使用类，如果您不必担心速度或兼容性，几乎不会使用ID。

使用ID就像在Visual Basic代码中使用全局变量一样糟糕。原因是ID必须是唯一的，这会在代码的不同独立部分之间引入不必要的和不良的依赖关系。使用类似.page1 .tab1＆gt; .field1的东西更好，因为您不必担心tab1中的field1的唯一性或page1内的tab1的唯一性。使用ID，您必须保留ID的注册表以保持控制并避免冲突。

仅在必须时使用ID，例如href ='＃name'或某些库要求您使用。

关于ID和Class的CSS最佳实践？

11 个答案: