专业WORDPRESS主题设计制作

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

发布于: 2022-11-03

1 id 和class 的区别

  • 1.1 id 说明
  • 1.2 class 说明
  • 2 什么是选择器?
    • 2.1 代码实例

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,来实现页面布局的。

article_with_pictures_plugin_1243_permanent_4a558c8b453f4e7566dc25cccb9268b9.webp

什么是选择器?

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

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

代码实例

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



.sidebar
{ 
background-color:black;
}

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



#footer
{ 
background-color:black;
}

希望我们网站( https://www.wordpressx.com/ ) 分享的《CSS选择器class跟id有什么区别?HTML中id和class用法》,对您有帮助。

TAG:
WP技术资料 wordpress模板制作、wordpress主题开发相关知识常见问题总结
MORE
服务电话:
0533-2765967

微信 13280692153