HTML+CSS:css选择器详情之标签选择器、类选择器以及ID选择器

  • 时间:2018-12-21 23:05 作者:恒创信息 来源:恒创信息 阅读:898
  • 扫一扫,手机访问
摘要:上篇文章给大家说了css的三种不同的引入方式,今天给大家说一下css的三种选择器:标签选择器、类选择器和ID选择器。那么有人就会问了,什么是选择器?我们写的css样式公告(定义)由两部分组成,形式如下:选择器{ 样式;},在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也
HTML+CSS:css选择器详情之标签选择器、类选择器以及ID选择器

上篇文章给大家说了css的三种不同的引入方式,今天给大家说一下css的三种选择器:标签选择器、类选择器和ID选择器。

那么有人就会问了,什么是选择器?我们写的css样式公告(定义)由两部分组成,形式如下:选择器{ 样式;},在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。比方我们之前写的span{ color:#f00; }中的span就为一个选择器。

(1)标签选择器

标签选择器其实就是我们经常说的html代码中的标签。例如html、span、p、div、a、img等等;比方我们想要设置网页中的p标签内一段文字的字体和颜色,那么css代码就如下所示:

HTML+CSS:css选择器详情之标签选择器、类选择器以及ID选择器

上面的css样式代码的作用:为p标签内的文字设置颜色为红色,字体的大小为16px;(具体的css样式我们会在后边讲解,这里先理解下就可)

(2)类选择器

类选择器在我们今后的css样式编码中是最常用到的,它是通过为元素设置单独的class来赋予元素样式效果。

使用语法:(我们这里为p标签单独设置一个类选择器.content,代码就如下所示)

HTML+CSS:css选择器详情之标签选择器、类选择器以及ID选择器

详细讲解:

1、类选择器都是使用英文圆点(.)开头;

2、每个元素可以有多个类名,,名称可以任意起名(但不要起中文,一般都是与内容相关的英文缩写)

3、类选择器只会改变类下的元素样式,而不会改变其它标签的默认样式;

我们上边的页面在浏览器上显示的效果就如下所示:(content下的文字内容颜色变成了红色,字体变成了16px)

HTML+CSS:css选择器详情之标签选择器、类选择器以及ID选择器

(3)ID选择器

ID选择器相似于类选择符,作用同类选择符相同,但也有少量重要的区别。

使用语法:

HTML+CSS:css选择器详情之标签选择器、类选择器以及ID选择器

详细讲解:

1、ID选择器为标签设置id="ID名称",而不是class="类名称"。

2、ID选择符的前面是符号为井号(#),而不是英文圆点(.)。

3、ID选择器的名称是唯一的,即相同名称的id选择器在一个页面只能出现一次;

对于css的三种选择器我们今天就先详情到这里,大家在平常可以自己多加练习练习,多熟练下class的使用方式与技巧。


每日金句:你今天的努力,是幸运的伏笔,当下的付出,是明日的花开。喜欢我的文章的小伙伴记得关注一下哦,每天将为你升级最新知识。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】Fortigate飞塔防火墙如何开启DNS转发/DNS代理(2025-10-14 23:58)
【系统环境|】有了它,再也不用担心电脑弹窗广告和病毒啦!(2025-10-14 23:57)
【系统环境|】如何关闭恼人的电脑弹窗广告?2招搞定(2025-10-14 23:55)
【系统环境|】实用软件推荐:电脑广告弹窗多?用他,都给你屏蔽掉!(2025-10-14 23:55)
【系统环境|】Nginx篇01——基本安装配置和静态页面设置(2025-10-14 23:54)
【系统环境|】Linux端口开放,查看,删除,防火墙(2025-10-14 23:53)
【系统环境|】安全HTTP头部配置: 基于CSP与HSTS的Web安全策略(2025-10-14 23:52)
【系统环境|】老K:做私域过1000万的赛道全部都聚焦在女性身上!(2025-10-14 23:51)
【系统环境|】JavaScript跨域问题: 如何解决跨域访问和资源共享的安全策略(2025-10-14 23:51)
【系统环境|】家庭七级财务防火墙(2025-10-14 23:50)
手机二维码手机访问领取大礼包
返回顶部