博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS的选择器
阅读量:6001 次
发布时间:2019-06-20

本文共 1048 字,大约阅读时间需要 3 分钟。

1.1 CSS的选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器,本小节将对CSS基础选择器进行详细地讲解,具体如下:
1.1.1 元素选择器
标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。其基本语法格式如下:

标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中,所有的HTML标记名都可以作为标记选择器,例如body、h1、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都有效。

例如:

h1{color: #F00;font-size: 50px;}

传智播客

标记选择器最大的优点是能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式。

1.1.2 ID选择器
id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

例如:

#demo1{color:#0f0;}

黑马训练营

CSS的选择器

“标签选择器”和“id选择器”共同作用的效果
1.1.3 类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

例如:

.myClass{font-size: 25px;}

Java培训

CSS的选择器

“标签选择器”和“类选择器”共同作用的效果
类选择器的高级用法:给指定的标签设置class样式
标签.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
1.1.4 扩展:包含选择器
包含选择器,两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式。
父标签 后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该选择器,是对“元素选择器”的扩展,对一个标签内部所有后代标签进行过滤。

转载于:https://blog.51cto.com/13587708/2386079

你可能感兴趣的文章
uva311 - Packets(贪心)
查看>>
磁盘IO性能监控(Linux 和 Windows)
查看>>
奇怪吸引子---Arneodo
查看>>
JVM相关命题的博客整理及总结
查看>>
Linux NFS服务器的安装与配置
查看>>
opencv 1.0 与 2.0的库对应表
查看>>
A9逻辑编译问题
查看>>
HTML里面Textarea换行总结
查看>>
xorm的sql builder
查看>>
MongoDB查询转对象是出错Element '_id' does not match any field or property of class
查看>>
kafka基本概念
查看>>
条件变量的陷阱与思考
查看>>
循序渐进的敏捷-每日例会
查看>>
图片标注工具LabelImg使用教程
查看>>
VMware12.0下安装CentOS-6.9-x86_64-bin-DVD.iso
查看>>
Solr Facet 搜索时,facet.missing = true 的真正含义
查看>>
对于Ian的访谈,不少关于GAN的内容
查看>>
011 递归
查看>>
南京建邺、秦淮等7个区公布校外培训机构白名单
查看>>
python 全局变量与局部变量
查看>>