当你可以用类做同样的任务时，为什么要使用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>
7条答案
按热度按时间mqkwyuun1#
ids和classes之间有几个区别。最重要的可能是语义上的差异。一个Id需要是唯一的（实际上，如果你在文档中使用相同的id两次，你的html是无效的），并识别你的HTML文档中的特殊元素，类在那里对有共同点的元素进行分组。1)在HTML树中搜索
id比搜索class要快，因为css处理器会在找到第一个匹配元素时停止。（因此idcss选择器更快）。2)id和类具有不同的specificity。由于id在文档中是唯一的，所以它们比类具有更高的特异性。这在较大的项目中很重要，因为你有很多CSS规则，会发生很多覆盖。
3)一旦你使用javascript，类和id之间的区别就更大了。
定义新元素会导致标记无效，这就是为什么最后一个选项不是一个好主意。
cczfrluj2#
两者的结果都是一样的，但是一个类可以使用一次或多次，而一个ID只能使用一次。如果您有一个唯一的元素，它将不会在页面上重用，则应使用ID。如果它是一个会重复出现的东西，那么应该使用一个类。
有些差异不仅仅涉及CSS。稍后，如果您深入研究javascript，您可能会选择HTML元素。如果您想确保选择正确的元素，那么ID比类更有用。
nnvyjq4y3#
我相信有几个原因。
一是因为特异性，
id排名高于classes。另一种是基于你所影响的对象的特定用途。这个类是否只影响字体大小、字体粗细、字体家族？它需要多次使用还是只需要使用一次？
我认为语义学也起了作用，即。如果您只使用一次
class，那么使用id更符合语义。您还可以使用
idfor JavaScript从文档中获取元素。这些只是一小部分，但我希望这能有所帮助
ifsvaxew4#
最好避免使用自定义标记，因为您永远不知道这些标记何时会成为标准化标记，并在将来有特殊用途。你的HTML标记也将是无效的。
我认为here很好地解释了id和class之间的区别。
8nuwlpux5#
你遇到的是CSS的 specificity 概念。类、ID和元素选择器只有30 selectors以上的3个，这意味着必须有规则来管理优先级。
计算特异性是quite complicated，但在大多数情况下，它或多或少看起来像这样（优先级较高的选择器是第一个）：
当涉及到ID或Class的细节时，我将其视为样式和语义问题：ID应该与唯一的东西一起使用，而Class则旨在可重用。
np8igboo6#
没有任何东西禁止你对单个元素使用类。Imho它不是一个坏的做法在所有。
这都是关于你所使用的选择器的表达值。无论是在html和你写的css。如果其他人或你未来的自己看到一个ID（而你的其他代码看起来像，你知道你在做什么;））在两者之一中，他知道或者至少应该立即知道某个元素在页面上只存在一次。
缺点是，重写规则变得更加困难，因为ID的权重/ a比类更高的特异性。根据类命名的策略和您在这里设置的规则，这可能是一个问题，也可能不是一个问题。
关于这个主题有很多好的读物。作为一个开始，我建议你看看这里：https://github.com/stevekwan/best-practices/blob/master/css/best-practices.md
z4bn682m7#
一个很大的原因是“JavaScript”。想象一下，尝试在没有Id的情况下使用JavaScript