Question

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;
}

Answer 1

将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>

外卖：

ID =学生ID（学校不向多名学生发放相同的ID）
CLASS =一群学生（就像'生物课'将在一个实地考察）

Answer 2

它只能分配给页面中的一个元素，但可以在多个CSS规则中使用。可以将类名分配给页面中的多个元素。

Answer 3

有关差异的说明，请参阅this answer。

一般来说，你使用id's   造型你知道的东西只是   例如，会出现一次   高级布局div之类的东西   这样的边栏，横幅区域等。

在样式所在的位置使用类   重复，例如说你带头特别   错误消息的标题形式，你   可以创建一个样式h1.error {}   只适用于

Answer 4

最后一点注意事项 - 某些浏览器会允许多个相同的“id”值，但您绝对不应该这样做，因为它会违反标准浏览器。

Answer 5

.class将影响“class”属性中匹配值的元素。 id的样式会影响“id”属性中匹配值的元素。

建议您不要在元素中重复ID值，因为这应该是当前页面上元素的唯一标识符。

CSS ID与类

5 个答案: