5

当您可以使用类完成相同的任务时，为什么还要使用 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>
4

6 回答 6

7

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

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

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

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

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

于 2013-11-11T19:55:02.670 回答
1

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

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

于 2013-11-11T19:54:15.617 回答
1

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

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

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

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

于 2013-11-11T19:57:01.743 回答
1

我相信有几个原因。

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

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

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

于 2013-11-11T19:57:57.487 回答
1

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

我认为这里是关于 id 和 class 之间区别的很好的解释。

于 2013-11-11T19:59:47.090 回答
1

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

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

  • 标签内样式定义
  • 身份证
  • 课程
  • 元素
  • 一切 （*）

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

于 2013-11-11T20:02:05.600 回答