Question

我是HTML / CSS编码的新手，因为我第一次碰到ID和类选择器，我脑海中浮现出一个问题。我一遍又一遍地搜索网络，但我找不到我想要的答案。

问题是：为什么在你可以用类做同样的任务时使用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>

Answer 1

id和class es之间存在一些差异。可能最重要的是存在语义差异。 Id需要是唯一的（实际上，如果在文档中使用相同的id两次，html是无效的）并且在HTML文档中标识特殊元素，那么类就可以对具有共同点的元素进行分组。

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

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

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

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

Answer 2

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

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

Answer 3

没有什么禁止您使用单个元素的类。 Imho它根本不是一个糟糕的做法。

所有关于您正在使用的选择器的表达值。在你写的html和css中都有。如果其他人或您未来的自己看到了一个ID（并且您的其他代码看起来像是，您知道自己在做什么;））在其中一个中，他知道或者至少应该立即知道某个元素是否存在只在页面上一次。

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

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

Answer 4

我相信有几个原因。

一个是因为特异性，id等级高于classes 另一种是基于您正在影响的对象的特定用途。该类是否仅影响字体大小，重量，族，是否需要多次使用或仅使用一次？
我认为语义也起作用，即如果你只使用class一次，那么使用id代替它会更具语义性。

您还使用JavaScript id从文档中抓取元素。

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

Answer 5

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

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

Answer 6

你遇到的是特异性的CSS概念。类，ID和元素选择器只有30 selectors中的3个，这意味着必须有规则来管理优先级。

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

标签内样式定义
的ID
类
元素
一切（*）

当谈到ID或类的细节时，我将其视为风格和语义的问题：ID应该与唯一的东西一起使用，而Class应该是可重用的。

CSS ID和类

6 个答案: