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的优先级内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/245411.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node.js安装配置详细教程(附图-贼详细)

一&#xff1a;下载 Node.js官网下载地址&#xff1a;Node.js — Download 选择自己需要的版本我用的Windows ps:如果想下载指定版本&#xff0c;点下面这个就可以选择想要的版本 二&#xff1a;安装 1.下载完成后&#xff0c;双击安装包开始安装 2.安装过程&#xff1a;一步…

基于禁忌搜索算法的TSP路径规划matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 TSP问题描述 4.2 禁忌搜索算法原理 4.3 算法步骤 5.完整程序 1.程序功能描述 基于禁忌搜索算法的TSP路径规划,输出优化收敛曲线以及路线规划图。 2.测试软件版本以及运行结果展示 …

redis-发布缓存

一.redis的发布订阅 什么 是发布和订阅 Redis 发布订阅 (pub/sub) 是一种消息通信模式&#xff1a;发送者 (pub) 发送消息&#xff0c;订阅者 (sub) 接收消息。 Redis 客户端可以订阅任意数量的频道。 Redis的发布和订阅 客户端订阅频道发布的消息 频道发布消息 订阅者就可…

C语言练习题110例(十)

91.杨辉三角 题目描述: KK知道什么叫杨辉三角之后对杨辉三角产生了浓厚的兴趣&#xff0c;他想知道杨辉三角的前n行&#xff0c;请编程帮他 解答。杨辉三角&#xff0c;本质上是二项式(ab)的n次方展开后各项的系数排成的三角形。其性质包括&#xff1a;每行的端点数为1&…

【量化交易】股市舞者:小明的撮合交易之旅

马西森AES撮合交易系统 在繁华的都市中&#xff0c;小明&#xff0c;一个普通的青年&#xff0c;刚刚赚到了人生的第一桶金——20万。这笔意外的财富&#xff0c;点燃了他对股市的强烈兴趣。他开始如饥似渴地学习金融知识&#xff0c;钻研各种交易策略。 一天&#xff0c;小…

关于mysql默认禁用本地数据加载的情况处理(秒解决)

1.首先报错信息&#xff1a;ERROR 3948 (42000): Loading local data is disabled; this must be enabled on both the client and server sides 2.排查问题&#xff1a; 先检查local_infile的状态&#xff1a;使用sql指令 show global variables like local_infile; 这种情…

详细分析Java中的StringUtils工具类(org.springframework.util.StringUtils)

目录 前言1. 基本知识2. 常用API方法3. 扩展类 前言 常用的工具类有很多&#xff0c;这是其中一个&#xff0c;了解基本的API可以帮助我们更好的开发 1. 基本知识 org.springframework.util.StringUtils 是 Spring Framework 中的一个实用工具类&#xff0c;用于执行各种字符…

对于gzip的了解

gzip基本操作原理&#xff1a;通过消除文件中的冗余信息&#xff0c;使用哈夫曼编码等算法&#xff0c;将文件体积压缩到最小。这种数据压缩方式在网络传输中发挥了巨大作用&#xff0c;减小了传输数据的大小&#xff0c;从而提高了网页加载速度。 静态资源 Vue Vue CLl修改v…

计算机网络-奈氏准则和香农定理(码间串扰 二者区别)

文章目录 失真失真的一种现象-码间串扰奈氏准则&#xff08;奈溃斯特定理&#xff09;例题 香农定理例题 奈氏和香农 失真 就是指与原来的不一样了 两种情况 前三个是正相关&#xff0c;最后一个是负相关 码元传输速率越快&#xff0c;失真程度越严重的原因可能包括以下几点…

如何使用Stable Diffusion的ReActor换脸插件

ReActor插件是从roop插件分叉而来的一个更轻便、安装更简单的换脸插件。操作简单&#xff0c;非常容易上手&#xff0c;下面我们就介绍一下&#xff0c;如何将ReActor作为stable diffusion的插件进行安装和使用。 一&#xff1a;安装ReActor插件 项目地址&#xff1a;https:/…

[MQ]常用的mq产品图形管理web界面或客户端

一、MQ介绍 1.1 定义 MQ全称为Message Queue&#xff0c;消息队列是应用程序和应用程序之间的通信方法。 如果非要用一个定义来概括只能是抽象出来一些概念&#xff0c;概括为跨服务之间传递信息的软件。 1.2 MQ产品 较为成熟的MQ产品&#xff1a;IBMMQ&#xff08;IBM We…

【Web前端实操15】利用Grid布局完成九宫格

相关知识点&#xff1a; 创建多列 column-count 属性指定了需要分割的列数 列与列之间的间隙 column-gap 属性指定了列与列间的间隙 列边框 column-rule-style 属性指定了列与列间的边框样式 column-rule-width 属性指定了两列的边框厚度 column-rule-color 属性指定了…

element el-date-picker type=“datetimerange“

刚写完结果需求变更了。封装的时间组件重新做。结合eacharts 。 直接上代码了 日期选择组件封装 <template><section class"warning-container"><header class"query-head"><el-form :inline"true" class"query-form…

c#算法(10)——求点到直线的距离

前言 在上位机软件开发领域,特别是机器视觉领域,经常会遇到尺寸测量的场景,比如让我们求一个点到一条直线的距离,我们已知了直线上的两个点的坐标,然后又已知了直线外的一个点的坐标,那么如何求出该直线外的一点到直线的距离呢?本文就是来讲解如何求点到直线的距离的,…

构建未来学堂:在线教育系统开发技术实践

在当今数字化时代&#xff0c;在线教育系统的开发越发显得至关重要。本文将带你深入了解在线教育系统的开发&#xff0c;涉及到关键的技术实践和代码示例。我们将采用现代化技术栈&#xff0c;为未来学堂的搭建提供实用的指南。 技术栈选择 在开始实际的开发之前&#xff0c…

Deepin基本环境查看(四)【硬盘/分区、文件系统、硬连接/软连接】

Linux操作系统(Deepin、Ubuntu&#xff09;操作系统中&#xff0c;硬盘分区的管理与Windows操作系统不同&#xff1b; 在Linux系统中维护着一个统一的文件目录体系&#xff0c;而硬盘和分区是以资源的形式由操作系统挂接和调度&#xff1b;此外Linux系统中连接&#xff08;硬连…

three.js中Meshline库的使用

three.js中Meshline的使用 库的地址为什么要使用MeshLine,three.js内置的线不好用吗?MeshLine入门MeshLine的深入思考样条曲线一个问题 库的地址 https://github.com/spite/THREE.MeshLine?tabreadme-ov-file 为什么要使用MeshLine,three.js内置的线不好用吗? 确实不好用,…

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-Tag标签管理实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…

研发日记,Matlab/Simulink避坑指南(四)——transpose()转置函数Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南&#xff08;一&#xff09;——Data Store Memory模块执行时序Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(二)——非对称数据溢出Bug》 见《…

五、flowable操作、查询相关

1、依赖 <dependency><groupId>com.ikaiyong.score</groupId><artifactId>score-spring-boot-starter-flowable</artifactId></dependency> 2、流程部署相关 如下建立对应文件和文件夹 2.1 流程部署 /*** 部署流程* param name*/GetMapp…