为什么我要使用 ID 选择器而不是类？答案

【问题标题】：Why would I use an ID selector instead of a class?为什么我要使用 ID 选择器而不是类？
【发布时间】：2013-11-23 17:49:15
【问题描述】：

既然可以用类完成相同的任务，为什么还要使用 ID？

我的意思是，好吧，我知道 ID 只供一次性使用，而类供多次使用，但是是什么禁止我只使用一次类选择器？那么，据此，CSS中ID存在的目的是什么？

此外，当我们可以在样式表中创建具有完全相同属性的新元素时，我们需要 ID 甚至类来做什么？

以下代码是我要询问的示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID's, classes and new elements</title>
<style>
    #sidebar1 {
        display: block;
        background-color: yellow;
        width: 200px;
        height: 500px;
        margin-right: 50px;
        float: left;
    }
    
    .sidebar2 {
        display: block;
        background-color: yellow;
        width: 200px;
        height: 500px;
        margin-right: 50px;
        float: left;
    }
    
    new_element {
        display: block;
        background-color: yellow;
        width: 200px;
        height: 500px;
        margin-right: 50px;
        float: left;
    }
</style>
</head>

<body>

    <div id="sidebar1">What is the difference?</div><!--Use of ID selector-->
    
    <div class="sidebar2">What is the difference?</div><!--Use of class selector just once !-->
    
    <new_element>What is the difference?</new_element><!--Use of a new made element with exactly the same attributes-->
    
</body>
</html>

【问题讨论】：

css 并不关心你使用哪个。当你想用你的元素做特定的事情时，id 更有用，主要是在 JS 中。创建新元素类型的处理方式因浏览器而异，并且某些版本（尤其是较旧的 IE 版本）不会尊重这些“自定义”元素。
stackoverflow.com/questions/12889362/…stackoverflow.com/questions/544010/css-div-id-vs-div-class

标签： html css class

【解决方案1】：

两者的结果相同，但一个类可以使用一次或多次，而一个 ID只能使用一次。如果您有一个不会在页面上重复使用的唯一元素，则应使用 ID。如果它会重复出现，则应该使用一个类。

有些差异不仅仅涉及 CSS。稍后，如果您深入研究 javascript，您可能会选择 HTML 元素。如果您想确保选择正确的元素，ID 会比类更有帮助。

【讨论】：

【解决方案2】：

ids 和classes 之间有几个不同之处。可能最重要的是存在语义差异。 Id 必须是唯一的（实际上，如果您在文档中使用相同的 id 两次，则您的 html 无效）并标识 HTML 文档中的特殊元素，类用于对具有共同点的元素进行分组。

1) 在 HTML 树中搜索 id 比 class 快，因为 css 处理器在它找到的第一个匹配元素处停止。（因此id css 选择器更快）。

2) id 和类有不同的specificity。由于 id 在文档中是唯一的，因此它们比类具有更高的特异性。这在大型项目中很重要，因为您有很多 CSS 规则，并且会发生大量覆盖。

3) 使用 javascript 后，类和 id 之间的差异会更大。

定义新元素会导致标记无效，这就是为什么最后一个选项不是一个好主意。

【讨论】：

+1 表示关于特异性的说明。我认为这是更重要的收获。
我不知道特异性。非常感谢！它还帮助我理解了为什么我的代码有缺陷并且其中的某些事情没有发生。

【解决方案3】：

没有什么禁止你对单个元素使用类。恕我直言，这根本不是一个坏习惯。

这都是关于您正在使用的选择器的表现力。在您正在编写的 html 和 css 中。如果其他人或您未来的自己在两者之一中看到一个 ID（而您的其他代码看起来像，您知道自己在做什么；）），他知道或至少应该立即知道某个元素存在一个页面上只有一次。

缺点是，覆盖规则变得更加困难，因为 ID 比类具有更大的权重/更高的特异性。根据类命名策略和您在此处设置的规则，这可能是也可能不是问题。

有很多关于这个主题的好读物。作为开始，我会推荐你，看看这里： https://github.com/stevekwan/best-practices/blob/master/css/best-practices.md

【讨论】：

【解决方案4】：

我相信有几个原因。

一是因为特殊性，id 的排名高于classes。
另一个是基于您正在影响的对象的特定用途。该类是否只影响字体大小、粗细、系列，是否需要多次使用或只使用一次？
我认为语义也起作用，即如果您只使用一次class，则使用id 更符合语义。

您还可以为 JavaScript 使用 id 从文档中获取元素。

这些只是少数，但我希望这会有所帮助

【讨论】：

【解决方案5】：

最好避免使用自定义标签，因为您永远不知道这些标签何时会变得标准化，并在未来有特殊用途。您的 html 标记也将无效。

我认为here 很好地解释了 id 和 class 之间的区别。

【讨论】：

【解决方案6】：

您碰到的是 specificity 的 CSS 概念。类、ID 和元素选择器只是30 selectors 中的三个，这意味着必须有规则来管理优先级。

计算特异性是quite complicated，但在大多数情况下，它或多或少看起来像这样（优先级较高的选择器优先）：

标签内样式定义
ID
类
元素
一切 (*)

当涉及到 ID 或 Class 的细节时，我将其视为样式和语义问题：ID 应该与唯一的东西一起使用，而 Class 旨在可重用。

【讨论】：