我是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>
ids和classes 之间有几个不同之处.可能最重要的是存在语义差异.一个Id必须是唯一的(实际上是你的HTML,如果您在文档中使用相同的ID两次无效),并在你的HTML文档识别特殊元素,类是存在于具有一些共同点组元素.
1)id在HTML树中搜索比class在css处理器找到的第一个匹配元素处停止更快.(因此idcss选择器更快).
2)Ids和类具有不同的特异性.由于ID在文档中是唯一的,因此它们具有比类更高的特异性.这在大型项目中非常重要,在这些项目中,您有很多CSS规则,其中会发生大量覆盖.
3)使用javascript后,类和ID之间的差异会更大.
定义新元素会导致标记无效,这就是为什么最后一个选项不是一个好主意.