文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS的id选择器与class选择器怎么使用

2023-07-04 19:33

关注

本篇内容介绍了“CSS的id选择器与class选择器怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

id选择器和class选择器介绍

CSS中对html元素的样式进行控制是通过CSS选择器来完成的,最常用的两种选择器为id选择器和class选择器。

一、id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

1、id 选择器以"#"来定义与以#开头

1)id 选择器以"#"来定义

下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

#red {color:red;}#green {color:green;}

下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色:

<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>

2)id选择器是以#开头

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

例如:

1. #para12. {3. text-align:center;4. color:red;5. }

二、class选择器

1、class选择器是以一个点"."号显示

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。

例如:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

<html><head><style>.center{text-align:center;}</style></head><body><h2 class="center">居中</h2><p class="center">段落居中。</p> </body></html>

效果图:

CSS的id选择器与class选择器怎么使用

你也可以指定特定的HTML元素使用class。

例如:

在以下实例中, 所有的 元素使用 让该元素的文本居中。

<html><head><style>p.center{text-align:center;}</style></head><body><h2 class="center">这个不受影响</h2><p class="center">这个段落居中对齐。</p> </body></html>

效果图:

CSS的id选择器与class选择器怎么使用

class选择器可以被多个html元素使用,因为元素的class属性没有必要保证唯一性。另外一个html元素也可以有多个class属性值,值之间用"."号隔开。如<p class="cls1,cls2"></p>是可以的。

注意事项

“CSS的id选择器与class选择器怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯