div class vs id

Question

当使用div时,最好使用class vs id吗？

是否最好使用类,在字体变体或html中的元素？然后使用id作为结构/容器？

这是我一直有点不确定的事情,任何帮助都会很棒.

Answer 1

使用id识别元素只会出现在页面上的单个实例.例如,如果您有一个放置在特定位置的导航栏,请使用id="navigation".

用于class对所有表现出某种特定方式的元素进行分组.例如,如果您希望公司名称在正文中以粗体显示,则可以使用<span class='company'>.

Answer 2

最重要的是要理解ID必须是唯一的:在页面中只应存在一个具有给定ID的元素.因此,如果您想要引用特定的页面元素,那通常是最好的选择.

如果您有多个相似的元素,则应使用元素类来标识它们.

一个非常有用的,令人惊讶的鲜为人知的事实是,通过在类名之间放置空格,您实际上可以将多个类应用于单个元素.因此,如果您发布了当前登录用户编写的问题,则可以使用<div class ="question currentAuthor">识别它.

Answer 3

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

学生ID卡是不同的.没有两个学生在校园里都会有相同的学生ID卡.但是,许多学生可以并且将至少分享一个班级.

可以将多个学生放在一个班级标题下,即生物学101.但是将多个学生放在一个学生证下是不可接受的.

当给出的规则在学校对讲系统,你可以给规则一个类:

"生物课上明天请穿红衬衫吗？"

.BiologyClass {
  shirt-color:red;
}

或者您可以通过调用他的唯一ID为特定学生提供规则:

"Jonathan Sampson明天会穿绿色衬衫吗？"

#JonathanSampson {
  shirt-color:green;
}

Answer 4

ID必须是唯一的,但在CSS中,它们在确定要遵循的两条冲突指令中的哪一条时也会优先考虑.

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

文字是白色的.

Answer 5

当您想要将类似的样式应用于许多不同的div或元素时,类很棒.当您想要解决格式化或使用javascript更新的特定元素时,ID很好.

Answer 6

使用ID的另一个好处是能够在锚标记中定位它:

<h2 id="CurrentSale">Product I'm selling</h2>

将允许您在其他地方直接链接到页面上的该位置:

<a href="#CurrentSale">the Current Sale</a>

这种情况的一个常见用途是为博客上的每个标题添加一个带有日期戳的ID(比如id ="date20080408"),这样您就可以专门定位博客页面的该部分.

同样重要的是要记住,对于ID有更多受限制的命名规则,主要是它们不能以数字开头.请参阅类似的问题:html中id属性的有效值是什么