CSS选择器class跟id有什么区别？HTML中id和class用法

CSS选择器class跟id有什么区别？HTML中id和class用法

陈沩亮最近在执行SEO，优化网站的WordPress主题。

虽然之前有学过一些基础的 HTML 和 CSS 知识，但是一段时间没有操作，尤其是CSS部分用法，很容易忘记。

所以，在此记录、总结 CSS 选择器 id、class 的区别和用法：

• id 对应 #div
• class 对应 .div

id 和class 的区别

id 说明

• id是固定标签，用来定义网页中，较大的样式，用 #div 的形式来定义
• 比如：划分栏目、顶部、正文、底部等……
• 用于定义一个特定的元素，每个页面只能出现一次，不能反复调用。

class 说明

• class是样式组，用来定义网页中，比较细节的样式，用.div的形式来定义，可以重复出现
• 比如：具体的一个菜单、一行文字等……
• 在同一个页面，可以被多个元素反复调用

div选择器本身不具有属性，通过定义它的 css，来控制这个div的宽度、高度、背景颜色和文字大小等等的一些布局。

一般的电子商务网站、建站程序生成的 html 网页，就是通过CSS，来实现页面布局的。

什么是选择器？

每个CSS样式的定义，都是由2个部分组成：

选择器 {样式}

• 在 {} 之前的部分，就是 “选择器”。
• “选择器” 表明了 {} 的 “样式” 作用对象。
• 意即该 “样式” 是在网页的哪个元素起作用？

代码实例

以下是选择和设置 class=”sidebar” 元素的样式：

.sidebar
{ 
background-color:black;
}

以下是选择和设置 id=”footer” 的元素样式：

#footer
{ 
background-color:black;
}