前端学习-CSS的三大特性(十七)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

前言

层叠性

继承性

行高的继承性

优先级

优先级注意点

权重叠加

总结


前言

引入css特性的学习


CSS 有三个非常重要的三个特性:层叠性、继承性、优先级。

层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题层曼性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠

继承性

现实中的继承:我们继承了父亲的姓CSS中的继承: 子标签会继承父标签的某些样式如文本颜色和字号。简单的理解就是:子承父业。

恰当地使用继承可以简化代码,降低CSS 样式的复杂性

子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)

继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞

行高的继承性

body {font:12px/1.5 Microsoft YaHei

}

行高可以跟单位也可以不跟单位如果子元素没有设置行高,则会继承父元素的行高为1.5●此时子元素的行高是:当前子元素的文字大小*1.5●body行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器,就会有优先级的产生选择器相同,则执行层叠性选择器不同,则根据选择器权重执行

选择器权重

优先级注意点

1.权重是有4组数字组成,但是不会有进位。

2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推.

3.等级判断从左向右,如果某一位数值相同,则判断下一位数值。

4.可以简单记忆法: 通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器 100,行内样式表为1000,!important无穷大.

5.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0.

权重叠加

如果是复合选择器,则会有权重叠加,需要计算权重


总结

欲穷千里目,更上一层楼

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android 第5种启动模式:singleInstancePerTask

Android 第5种启动模式:singleInstancePerTask 随着 Android 版本的更新,应用启动模式逐渐丰富。在 Android 12 中,新增了一种启动模式——singleInstancePerTask。它是继 standard、singleTop、singleTask 和 singleInstance 之后的第五种启…

纯css 轮播图片,鼠标移入暂停 移除继续

核心 滚动&#xff1a; animation: 动画名称 20s linear infinite normal;停止&#xff1a; animation: 动画名称 20s linear infinite paused; 完整例子&#xff1a; html: <div class"carousel-wrapper"><div class"carousel"><div cl…

chrome浏览器映射端口

chrome://inspect/#devices 方法2

mysql主从复制及故障修复

一、主MySQL数据库的配置 分别在三台主机&#xff08;chen2/10.110、chen3/10.120、chen4/10.130)中安装mysql数据&#xff0c;其中chen2/10.110作为主MySQL服务器&#xff0c;其余两台作为从MySQL服务器。 1、在主机上部署mysql数据库 详细的请看上一篇&#xff1a;mysql数据…

NewStarCTF2024-Week2-Web-WP

目录 1、复读机 2、你能在一秒内打出八句英文吗 3、遗失的拉链 4、谢谢皮蛋 plus 5、PangBai 过家家&#xff08;2&#xff09; 1、复读机 测了下存在 ssti 没什么说的 fenjing 秒了 2、你能在一秒内打出八句英文吗 每次出来的需要提交的内容都不一样 exp&#xff1a; …

CUDA 全局内存

全局内存在片外。 特点是&#xff1a;容量最大、延迟最大、使用最多 全局内存中的数据是所有线程可见的&#xff0c;Host端可见&#xff0c;且具有与程序相同的生命周期 动态全局内存 主机代码使用CUDA运行时API &#xff1a; cudaMalloc 声明内存空间&#xff1b; cudaFree…

MySQL【知识改变命运】07

MySQL 1&#xff1a;Group by 分组查询1.1&#xff1a;语法&#xff1a;1.2&#xff1a;练习 2&#xff1a;having⼦句3回顾&#xff1a;3&#xff1a;内置函数3.1 :⽇期函数 1&#xff1a;Group by 分组查询 可以根据某列&#xff0c;进行分组查询&#xff0c;比如学校里面的…

基于cloudreve(Docker应用)搭建网盘服务,用于目录的分享和在线预览。

文章目录 I 基于cloudreve(Docker应用)搭建网盘服务安装主要功能设置角色最大容量II 知识扩展:网盘类的文件预览需求背景: iOS可以直接预览PDF等常见格式文件,但是Android浏览器需要先下载文件,才能查看文件内容,因此需要搭建支持目录的分享和在线预览的MinIO文件服务提供…

数据安全存储系统的概念与原理

数据安全存储系统是一种综合性的数据保护方案&#xff0c;旨在确保数据的完整性、保密性和可用性。以下是对数据安全存储系统的详细介绍&#xff1a; 一、概念与原理 数据安全存储系统通过硬件、软件和网络等多个层面的保护措施&#xff0c;防止未经授权的访问、避免数据丢失或…

【MySQL 保姆级教学】表结构的操作(4)

表结构的操作 1. 定义和语法2. 创建表 CREATE2.1 创建表的本质2.2 表的存储引擎2.3 表的字符集和校验规则2.4 创建表实例 3. 查看表结构 DESC3.1 作用3.2 示例 4. 修改表结构 ALTER4.1 添加列 ADD4.2 修改列 MODIFY4.3 删除列 DROP4.4 更改列名 CHANGE 5. 修改表名 RENAME6. 删…

一次性解决vue3引入@jiaminghi/data-view需要手动修改node_modules下文件

修改文件1&#xff1a;node_modules\jiaminghi\data-view\lib\components\decoration6\src\main.vue 修改文件2&#xff1a; node_modules\jiaminghi\data-view\lib\components\decoration3\src\main.vue 修改前&#xff1a; 修改后&#xff1a; 通过打补丁的方式对引用库进行…

【自动驾驶】控制算法(十二)横纵向综合控制 | 从理论到实战全面解析

写在前面&#xff1a; &#x1f31f; 欢迎光临 清流君 的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落。&#x1f4dd; 个人主页&#xff1a;清流君_CSDN博客&#xff0c;期待与您一同探索 移动机器人 领域的无限可能。 &#x1f50d; 本文系 清流君 原创之作&…

Maven与Gradle的区别

Maven与Gradle是两种流行的构建工具&#xff0c;广泛用于Java项目的管理和构建。以下是它们的对比&#xff0c;包括官网、Windows 11配置环境、在IDEA中的相同点和不同点&#xff0c;以及它们各自的优缺点。 官网 Maven官网: https://maven.apache.orgGradle官网: https://gr…

将爱传递 将“服务好”延伸

从泰康客户,转身成为泰康人,她直言是因为亲身感受了泰康“服务好”的魅力。 入司已8年的泰康养老浙江分公司HWP何英英,是泰康“服务好”的受益者。她从朋友的理赔中见证了泰康服务好的温度与力量,又被泰康养老的职域模式所吸引选择加入泰康。如今,她全身心投入在服务的第一线,…

2024软考网络工程师笔记 - 第4章.局域网和城域网

文章目录 局域网基础1️⃣局域网和城域网体系架构 IEEE&#xff08;负责链路层&#xff09;2️⃣局域网拓扑结构 &#x1f551;CSMA/CD1️⃣CSMA/CD2️⃣CSMA/CD三种监听算法3️⃣冲突检测原理 &#x1f552;二进制指数退避算法1️⃣ 二进制指数退避算法 &#x1f553;最小帧长…

分库分表方式介绍

分库分表方式 分库分表包括分库和分表两个部分&#xff0c;在生产中通常包括&#xff1a;垂直分库、水平分库、垂直分表、水平分表四种方式&#xff1b; 1、垂直分表 1.1 垂直分表定义 垂直分表就是在同一数据库内将一张表按照指定字段分成若干表&#xff0c;每张表仅存储其…

RabbitMQ是什么?

了解MQ 消息队列&#xff08;MQ&#xff09;是一种用于异步通信的通信机制&#xff0c;通过将消息存储在队列中以实现系统之间的解耦。MQ 的主要功能是异步传递消息&#xff0c;允许发送者将消息发送到队列中&#xff0c;而接收者可以在适当的时候从队列中读取消息。MQ 常用于…

面试-2024年7月16号

面试-2024年7月16号 自我介绍Mysql主从复制是做了一个什么样的集群&#xff1f;在Mysql的使用过程中遇到过哪些问题&#xff1f;mysql迁移具体步骤mysql漏洞修复是怎么做的。mysql的容灾方案&#xff08;灾备恢复机制&#xff09;。redis多节点怎么部署的redis的备份与恢复、迁…

【系统配置】信创系统配置文件保护与防篡改 _ 统信 _ 麒麟 _ 方德

原文链接&#xff1a;【系统配置】信创系统配置文件保护与防篡改 | 统信 | 麒麟 | 方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于如何在信创&#xff08;国产化&#xff09;系统中进行配置文件保护与防篡改的文章。随着信创系统在各行业的广泛应用&#x…

Gin框架操作指南01:开山篇

Gin是目前最流行&#xff0c;性能最好的的GoWeb框架&#xff0c;几乎成为了学习GoWeb必备的知识。本人最近也在学Gin&#xff0c;在b站搜了很多教程&#xff0c;发现有的教程不够详细&#xff0c;有的教程工具包安装有问题&#xff0c;而官方文档的很多示例代码又不全&#xff…