为什么我要使用ID选择器而不是类选择器?

7
为什么我们可以使用class来完成相同的任务时还要使用ID呢?
我是说,我知道ID只能使用一次,而class可以使用多次,但是如果我只需要使用一次,有什么禁止我使用class选择器的呢?那么,基于此,CSS中ID的存在目的是什么?
此外,当我们可以在样式表中创建一个具有完全相同属性的新元素时,我们为什么需要ID甚至class?
以下代码是我想要询问的示例:
<!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)将不会支持这些“自定义”元素。 - scrappedcola
1
https://dev59.com/GWcs5IYBdhLWcg3wYzH6 https://dev59.com/bHRB5IYBdhLWcg3wtZIV - caramba
7个回答

10

idclass有几个不同之处,最重要的是语义上的区别。一个Id需要是唯一的(如果在文档中使用相同的id两次,则实际上您的HTML无效),并且标识HTML文档中的特殊元素,而类则是将具有共同点的元素分组。

1) 在HTML树中搜索idclass快,因为CSS处理器会在找到第一个匹配元素时停止。(因此,id CSS选择器更快)。

2) Id和class具有不同的特异性。由于id在文档中是唯一的,它们的特异性比类高。这在较大的项目中非常重要,在这些项目中,有许多CSS规则发生重写。

3) 当您使用JavaScript时,类和ID之间的差异甚至更大。

定义新元素将导致您的标记无效,因此最后一个选项不是一个好主意。


+1 对于特定性的注释。我认为这是更重要的要点。 - David Link
我之前不知道 specificity,非常感谢!这也帮助我理解为什么我的代码有缺陷,某些事情没有发生。 - Spike

2
两者会产生相同的结果,但是类可以使用一次或多次,而ID只能使用一次。如果您有一个在页面上不会重复使用的唯一元素,则应该使用ID。如果它是一个将会重复出现的元素,则应该使用类。有些差异不仅涉及CSS。稍后,如果您深入了解javascript,您可能会选择HTML元素。如果您想确保选择正确的元素,则ID比类更有帮助。

1

没有任何禁止您将类用于单个元素。在我看来,这并不是一个坏习惯。

关键在于您使用的选择器的表现力价值。无论是在编写html还是css时。如果其他人或您未来的自己在两者中的一个中看到ID(而且您的其他代码看起来像是您知道自己在做什么),他应该立即知道某个元素只存在于页面上一次。

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

关于这个主题,有很多好的阅读材料。作为开始,我建议您在这里查看: https://github.com/stevekwan/best-practices/blob/master/css/best-practices.md


1
我认为有几个原因。

一个是因为具体性,idclass更高级。
另一个基于你所影响的对象的特定用途。这个类是否只影响字体大小、重量、家族,它需要被多次使用还是仅使用一次?
我认为语义学也起到了一定的作用,即如果您只使用一次class,使用id可能更具有语义性。

您还可以使用id从文档中获取元素进行JavaScript操作。

这些只是其中的一些,但我希望这能够有所帮助。


1
最好避免使用自定义标签,因为您永远不知道这些标签何时会标准化,并在未来有特殊用途。此外,您的HTML标记将无效。
我认为这里是关于ID和类之间差异的不错解释。

1
您所遇到的是CSS中“特定性”的概念。类、ID和元素选择器仅是30个选择器中的3个,这意味着必须有规则来管理其优先级。
计算特定性相当复杂,但在大多数情况下,它看起来差不多是这样的(优先级高的选择器排在前面):
- 标签内样式定义 - ID - 类 - 元素 - 通配符 (*)
至于ID或类的具体细节,我将其视为样式和语义问题:ID应与唯一的内容一起使用,而类旨在重用。

0

一个很大的原因是“JavaScript”。试想一下,如果没有ID,你如何使用JavaScript。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接