CSS ID和CSS Class之间的基本区别是什么?
有人告诉我,ID只能在一页中使用一次。但我发现它可以多次使用。
像
body
{
background-color: #3399FF;
}
div#menuPane{
position: absolute;
left: 25px;
top: 25px;
width: 25%;
}
div.menu {
display: block;
font-size: 14px;
margin: 0;
padding: 0;
border: 2px solid #7FC07F;
}
div.menu a {
display: block;
font-weight: bold;
text-decoration: none;
text-align: right;
letter-spacing: 1px;
margin: 0px;
color: black;
border-top: 1px solid #487048;
}
div.menu a:link{
background: #33CCFF;
}
div.menu a:visited{
background: #33CCFF;
}
div.menu a:hover{
background: #3FC73F;
letter-spacing: 2px;
}
div.menu h4{
padding: 2px;
margin: 0px;
}
div#content{
position: absolute;
left: 30%;
top: 25px;
width: auto;
border: 2px double #7FC07F;
background-color: #33CCFF;
padding: 2px;
margin-right: 5px;
}
div#content h3{
background-color: #A3F4A3;
text-align: right;
letter-spacing: -1px;
color: #386938;
border-bottom: 1px solid black;
}
div#content a:link, a:visited{
background:#0099FF;
color: #A3F4A3;
letter-spacing: 1px;
}
div#content a:hover{
background: #FF0000;
color: #A3F4A3;
letter-spacing: 1px;
}
答案 0 :(得分:28)
将ID视为您的学生证。你的学校只有一个存在 - 你的。把课程想象成一群孩子......所有人都属于同一类:“生物学”。如果你想向一个特定的学生发表讲话,你可以通过承认他/她的身份证来解决这个问题 - 因为这样做永远都不会针对一个以上的学生。如果你想向一群学生讲话,你可以通过承认他们的课程来做到这一点 - “生物课今天将享用披萨”vs“Jonathan Sampson今天将享用披萨”。
<students>
<student id="jonathan-sampson" class="biology" />
<student id="lizza-matthews" class="earth-science" />
<student id="michelle-andrews" class="biology" />
</students>
外卖:
答案 1 :(得分:11)
它只能分配给页面中的一个元素,但可以在多个CSS规则中使用。可以将类名分配给页面中的多个元素。
答案 2 :(得分:3)
有关差异的说明,请参阅this answer。
一般来说,你使用id's 造型你知道的东西只是 例如,会出现一次 高级布局div之类的东西 这样的边栏,横幅区域等。
在样式所在的位置使用类 重复,例如说你带头特别 错误消息的标题形式,你 可以创建一个样式h1.error {} 只适用于
答案 3 :(得分:1)
最后一点注意事项 - 某些浏览器会允许多个相同的“id”值,但您绝对不应该这样做,因为它会违反标准浏览器。
答案 4 :(得分:0)
.class将影响“class”属性中匹配值的元素。 id的样式会影响“id”属性中匹配值的元素。
建议您不要在元素中重复ID值,因为这应该是当前页面上元素的唯一标识符。