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

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

hot3.png

赶紧来系统的认识一下CSS选择器吧!

CSS基础选择器(作用:选取元素)

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器,CSS基础选择器有四种:

标签选择器

  • 标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。其基本语法格式如下:
  • 标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3}
  • 标记选择器最大的优点是能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式。 (直接复制代码到你的编辑器中查看效果哦)
	
Document

段落

标题1

标题2

类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

  • .类名{属性1:属性值1;属性2:属性值2;属性3:属性值3} 类选择器最大的优势是可以为元素对象定义单独或相同的样式。
	
Document

P1

P2

P3

P4

id选择器

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

  • #id名{属性1:属性值1;属性2:属性值2;属性3:属性值3} 该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。
	
Document

P1

P2

通配符选择器

通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

  • *{属性1:属性值1;属性2:属性值2;属性3:属性值3}
  • 例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
*{	margin:0;		/*定义外边距*/	padding:0;		/*定义内边距*/}

并集选择器

并集选择器必须同时满足所有的条件,选择器中间使用逗号隔开(英文逗号):

	
Document

含有类的p标签

只是p标签本身

只是div标签本身

含有类的h1标签

含有id名的span标签

交集选择器

“交集选择器”由两个选择器直接链接构成,其结果是选中各自元素范围的交集。

	
Document

含有类和id的p标签

只是p标签

只是div标签

含有类的h1标签

后代选择器

后代选择器使用空格隔开两个选择器,符合条件的是父选择器的所有子代选择器。

	
Document

这是p

这是div

这是h1

这是最里面的p

这是div同级的p

子代选择器

子代选择器使用'>'连接,只选择到直接子代选择器。

	
Document

这是直接子代p

这是直接子代div

这是直接子代h1

这不是直接子代p

这是同级p

注意点

  • 选择器的命名规则:命名的取值范围:0~9,a~z,A~Z,_,-;不能以数字开头。
  • 如果交集选择器中有标签选择器,则标签选择器必须写在前面。

怎么样,你了解了吗?如果还是懵懂,那就只好多看看再多写几遍就好啦,加油!

转载于:https://my.oschina.net/yxmBetter/blog/828761

你可能感兴趣的文章
Java调用solrj5.5.3接口,查询数据
查看>>
Python中的logging模块
查看>>
plink, vcftool计算等位基因频率(allele frequency,vcf)
查看>>
变量和赋值
查看>>
mysql的优化
查看>>
关于域证书的发布CA和CRL的内容 (Windows 2008 Server R2 SP1)
查看>>
软件测试英语专业词汇汇总
查看>>
Java实现word文档在线预览,读取office(word,excel,ppt)文件
查看>>
python笔记(五)装饰器函数
查看>>
Permutations II
查看>>
Super Ugly Number
查看>>
(转载)UTF-8和GBK的编码方式的部分知识:重要
查看>>
convert RGB image to a 2x2 [GR;BG] Bayer pattern
查看>>
机器学习 -- 机器学习是什么?
查看>>
三台机器之间ssh互信配置
查看>>
mysql8.0.16二进制安装
查看>>
第一次课后作业
查看>>
ZooKeeper学习第三期---Zookeeper命令操作
查看>>
MFC MDI 窗口函数执行顺序
查看>>
2017ACM/ICPC亚洲区沈阳站-重现赛(感谢东北大学)
查看>>