CSS ID和类 [英] CSS ID's and classes
问题描述
我刚接触HTML / CSS编码，自从我第一次碰到ID和类选择器之后，一个问题就一直在我心中。我一遍又一遍地搜索了网络，但我没有找到我想要的答案。
I'm new to HTML / CSS coding and since I first bumped into the ID and class selector, one question has been running through my mind. I searched the web thoroughly over and over again, but I coudln't find the answer I was looking for.
问题是：为什么要使用ID，当你可以用类做同样的任务？
The question is : Why use ID when you can do the same task with class ?
确定我知道ID是只是一次性使用，类是为许多，但是禁止我使用类选择器只有一次？所以，根据这个，在CSS中存在ID的目的是什么？
I mean, ok I know that ID's are just for one time use and classes are for many, but what forbids me from using the class selector for just once ? So, according to this, what is the purpose of existence of ID's in CSS ?
此外，我们需要ID和甚至类，当我们可以做一个新的元素在样式表中具有完全相同的属性？
Furthermore, what do we need ID's and even classes for, when we can make a new element in the stylesheet with exactly the same attributes ?
以下代码是我要询问的示例：
The following code is an example of what I'm trying to ask :
<!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>
推荐答案
id s和 class es。可能最重要的是存在语义差异。 Id 需要是唯一的（实际上，如果您在文档中使用相同的id两次，html是无效的），并且标识HTML文档中的特殊元素，
There are several differences between ids and classes. Probably most importantly there is a semantic difference. An Id needs to be unique (actually you html is invalid if you use the same id twice in the document) and identifies special elements in your HTML Document, classes are there to group elements which have something in common.
1）在HTML树中搜索 id 比 class ，因为css处理器停止在它找到的第一个匹配元素。 （因此 id css选择器更快）。
1) Searching for id in the HTML Tree is faster than class because the css processor stops at the first matching element it finds. (Thus id css selectors are faster).
2）Id和类有不同特异性。因为id在文档中是唯一的，所以它们具有比类更高的特异性。这在大型项目中很重要，因为你有很多CSS规则，很多覆盖发生。
2) Ids and classes have different specificity. Since ids are unique in the document, they have higher specificity than classes. This is important in bigger projects where you have a lot of CSS rules where a lot of overwriting occurs.
3）类和ids之间的差异甚至更大，一旦你工作使用javascript。
3) The difference between classes and ids is even greater once you work with javascript.
定义新元素会导致您的标记无效，这就是为什么最后一个选项不是一个好主意。
Defining new elements leads you markup to be invalid, that's why the last option is not a good idea.
这篇关于CSS ID和类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
