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

  • A+

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: