CSS复合选择器和CSS层叠性、继承性有哪些内容?

知识引入

1.CSS复合选择器

书写CSS样式表时,可以使用CSS基础选择器选中目标元素。但是在实际网站开发中,一个网页中可能包含成千上万的元素,如果仅使用CSS基础选择器,是远远不够的。为此,CSS提供了几种复合选择器,实现了更强、更方便的选择功能。复合选择器是由两个或多个基础,通过不同方式组合而成选择器,具体如下。

(1)标签指定式选择器

标签指定式选择器又称交集选择器,有两个选择器构成,其中一个为标签选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格。

下面通过一个案例来演示一下标签选择器的使用方法。

先写代码,如图1

图1

保存运行如图2

图2

(2)后代选择器

后代选择器是用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格隔开。当标签发生嵌套时,内层标签就成为了外层标签的后代。

例如:当<p>标签嵌套<strong>标签时 就可以使用<strong>标签对后代选择器对其中的<strong>标签控制。通过一个案例来演示一下后代选择器的使用方法。

先写代码,如图3

图3

保存运行如图4

图4

注意:由图3和图4中我们可以看出,后代选择器定义的样式仅仅适用于嵌套在<p>标签里面的<strong>标签,其他的<strong>标签不受影响。后代选择器不限于使用两个元素,如果需要加入更多的元素,只需在元素之间加上空格就好了。

(3)并集选择器

并集选择器是各个选择器通过逗号(英文状态下)连接而成的,任何形式下的选择器(包括标签选择器、类选择器、id选择器)都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

例如在页面中有两个标题三个段落,它们的字号和颜色相同。同时一个标题和一个两个段落文本有下划线效果,这时就可以使用并集选择器定义CSS样式。代码如图5

图5

保存运行如图6

图6

2.CSS层叠性和继承性

CSS是层叠样式表的简称,层叠性和继承性是其基本的特征。

(1)层叠性

层叠性是指多种CSS样式的叠加。例如,使用内嵌式CSS样式表定义<p>标签字号大小为12像素,使用外链式定义<p>标签颜色为红色,那么段落文本显示样式为12像素和颜色为红色这两样叠加在一块,即产生了叠加。

下面通过一个案例来演示一下CSS的叠加性,先写代码,如图7

图7

保存运行如图8

图8

(2)继承性

继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,例如文本颜色和字号。如果定义主体元素<body>的文本颜色为黑色,则页面中所有的文本颜色为黑色,这是因为其他的标签都嵌套在<body>标签中,是<body>的子标签。

继承性非常有用,它使网页设计师不必再每个元素的每个后代加上相同的样式。如果设置的属性是一个可继承的属性,只需将它应用于父级元素即可,例如下面的代码:

p,div,h1.h2.h3.h4,ul,ol,dl,li{color:black;}

就可以写成:body{color:black;}

第二种的效果是一样的,而且代码更加简洁,恰当地使用继承可以简化代码,降低CSS样式的复杂性。但是如果在页面中所有的元素被大量继承样式,那么判断样式的来源就会很困难。所以对于字体、文本属性等网页中通用的样式就可以继承。例如字体、字号、颜色、行距等都可以在body元素中统一设置,然后通过CSS继承影响文档中所有的文本。

并不是所有的CSS都具有继承性,例如下面的就不具有继承性。

*边框属性

*外边距属性

*内边距属性

*背景属性

*定位属性

*布局属性

*元素宽高属性

注意:当为<body>设置字号属性时,标题文本不会采用这个样式,读者可能会认为标题没有继承文本字号,这种想法是不正确的。标题文本之所以不采取body元素设置的字号,是因为标题标签有<h1>~<h6>有默认字号样式,这时默认字号覆盖了继承的字号。

3.以上就是CSS复合选择器和CSS层叠性、继承性的内容了,下期我们讲CSS的优先级内容。

相关推荐
卸任5 小时前
Vibe coding工具使用心得
前端·ai编程
brien95 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance6 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M6 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写6 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李6 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易6 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马6 小时前
前沿视界
前端
kyriewen6 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易7 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员