前端04-CSS三大特性

news2024/11/15 22:41:37

三大特性:层叠性、继承性、优先级

层叠性

相同选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题。
—>哪个样式离结构近,就执行哪个样式

继承性

子标签会继承父标签中的某些样式,主要继承跟文字相关的样式,还有颜色

  • 行高的继承
    在这里插入图片描述
    如果行高不加px这个单位,就代表当前文字大小的x倍

优先级

给同一个元素指定多个选择器,就会有优先级的产生
选择器相同,则执行层叠性;选择器不同,则根据选择器权重执行;
选择器权重从小到大:
继承or* < 元素选择器<类选择器or伪类选择器<ID选择器<行内样式style=“” < !important重要的;

举例:
在这里插入图片描述
其中 div是元素选择器,.test是类选择器,类选择器权重大于元素选择器,所以效果随类选择器生成效果是红色
加一个id选择器,效果又会随id选择器改变
在这里插入图片描述

  • 复合选择器的权重叠加问题
    举例:
    在这里插入图片描述
    最终效果是红色,即上边权重大于下边权重,因为权重累加

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试(一)

String、StringBuffer、StringBuilder区别 string 类中使用 final关键字字符数组保存字符串&#xff0c;所以 String 对象是不可变的。而StringBuilder 与 StringBufer 也是使用字符数组保存字符 char[]value 但是没有用 final 关键字修饰&#xff0c;所以这两种对象都是可变…

2023性价比高的台灯测评哪些好一点?性价比高的台灯推荐

我们知道现代社会近视的人非常多&#xff0c;而且呈低龄化发展&#xff0c;如果不能在近视之后保证科学的用眼&#xff0c;那视力也会变得越来越差。选择好台灯也是保护视力的一个方面&#xff0c;有很多台灯实际上含有蓝光&#xff0c;它对视网膜有一定伤害性&#xff0c;护眼…

gRPC---TLS实现

文章目录 1.首先通过openssl生成证书和私钥2.配置环境变量3.命令行测试 openssl4. 生成证书5. 更改openssl.cfg6.7.服务端代码8.客户端代码 1.首先通过openssl生成证书和私钥 https://slproweb.com/products/Win32OpenSSL.html 2.配置环境变量 3.命令行测试 openssl 4. 生成…

UEStudio v2023 Crack应用程序脚本更新

UEStudio v2023 Crack应用程序脚本更新 添加了现代JavaScript支持和完整的浏览器功能。 默认情况下添加了传统的JavaScript支持&#xff0c;以实现完全的向后兼容性。 可对接的Microsoft PowerShell终端 添加了可停靠窗口&#xff0c;可以作为浮动窗口放置在任何位置&#…

java学习之枚举

目录 一、枚举引出 二、分析问题 三、 解决方案-枚举 四、枚举的二种实现方式 五、应用案例 六、小结 一、枚举引出 package enum_;public class Enumeration01 {public static void main(String[] args) {Season spring new Season("春天", "温暖")…

工具链和其他-Web服务器和实例caddy

目录 web服务器介绍 web服务器需要哪些能力&#xff1f;以caddy为例 web server&#xff08;用户发请求它返回网页&#xff09; 代理&#xff08;proxy&#xff09; 缓存&#xff08;cache&#xff09; 日志&#xff08;logging&#xff09; API网关&#xff08;api gatewa…

机器视觉实用工具集NO.18——使用YOLO8实时检测物体,性能爆棚

目录 前言安装YOLO8安装YOLO8的模型程序源代码总结 前言 安装了pytorch框架以后&#xff0c;就可以玩一些开源的深度学习框架了&#xff0c;比如YOLO8&#xff0c;是基于pytorch框架的&#xff0c;关于如何安装pytorch框架&#xff0c;可以参考上篇文章链接《pytorch深度学习框…

我看看哪个靓仔还没把Github Copilot用起来?

本人经常分享有价值的生产力工具、技术、好物与书籍&#xff0c;可关注同名公众&#x1f42d;并设为&#x1f31f;星标&#xff0c;第一时间获得更新 Github Copilot 是一个AI编程助手&#xff0c;其使用 OpenAI CodeX 在你的编辑器中实时建议代码或给你实现整个功能。 视频版介…

C++基础 类的自动转换和强制类型转换

参考 C Primer Plus (第6版) 类自动转换 接受一个参数的构造函数允许使用赋值语法将对象初始化一个值 Classname object value; 等价于 ClassName object(value); 等价于 ClassName object ClassName(value); 只有接受一个参数的构造函数才能作为转换构造函数(某类型->…

windows下开发ffmpeg(亲测可用)下载FFmpeg的源码、库、链接文件(二)

1,首先安装opencv在clion下的使用 参见我的另外一篇文章Windows上使用CLion配置OpenCV环境,亲测可用的方法 2,亲测可以用,建议使用迅雷下载ffmpeg(全部的包都有) Windows10 下 CLion 配置 FFmpeg 开发环境 3,参考文章,碰到系统提示缺少.dll库,问题解决 参考文章1:…

HCIA-RS实验-STP和RSTP(1)

这篇文章开始前&#xff0c;先简单说下这2个协议&#xff1b; 本文介绍了STP和RSTP的基本原理、优缺点以及应用场景。STP和RSTP都是生成树协议&#xff0c;主要作用于避免网络中的环路&#xff0c;保证数据包能够正常转发。在实际应用中&#xff0c;需要根据实际情况选择合适的…

6.MapReduce(1)

本章节将分为InputFormat,split,OutputFormat三个小章节来介绍框架原理 1.InputFormat 1.1 切片: 将输入数据分成几份,每份交给一个MapTask去处理(getSplit方法) 对于MapRedcue,切片发生在客户端,任务提交的时候 机制:MapTask并行度决定机制 切了多少片,就开启多少个M…

颠覆世界的“数字孪生”到底是什么?这篇文章带你搞懂全部内涵!

在春节很火的电影《流浪地球2》中&#xff0c;已经去世的小女孩图丫丫&#xff0c;被她的父亲重新将其个人的信息模型导入最强大的计算机而“复活”了。屏幕中的丫丫就是一个数字孪生体。我们可以看到她的一颦一笑&#xff0c;听到她跟你的对话&#xff0c;看到她做出反应。这就…

【细读Spring Boot源码】启动步骤

前言 版本&#xff1a;spring-boot-2.7.3 | spring-context-5.3.22 main函数 直接使用静态函数启动 public static void main(String[] args) {SpringApplication.run(SettlleApplication.class, args); }静态帮助程序&#xff0c;可用于使用默认设置从指定源运行SpringAppli…

港联证券|人民币大消息!美科技股涨嗨,微软一夜暴增超万亿!

当地时间26日&#xff0c;美股三大股指收盘涨跌纷歧。到收盘&#xff0c;道指报33301.87点&#xff0c;下跌0.68%&#xff1b;标普500指数报4055.99点&#xff0c;下跌0.38%&#xff1b;纳指报11854.35点&#xff0c;上涨0.47%。 榜首共和银行大跌29.75%&#xff0c;该股昨天大…

SuperMap iClient3D for Cesium 构建隧道

背景 前段时间看到一篇构建隧道的文章&#xff08;https://blog.csdn.net/supermapsupport/article/details/128453116&#xff09;&#xff0c;突然想到一个使用场景&#xff1a;隧道通常是建在山体下面&#xff0c;是否可以通过这种方式构建出一条贯穿山体的隧道&#xff0c…

mysql如何加行锁

一、概述 InnoDB 引擎是支持行级锁的&#xff0c;而 MyISAM 引擎并不支持行级锁&#xff0c;所以后面的内容都是基于 InnoDB 引擎的。当我们使用delete、update进行数据库删除、更新的时候&#xff0c;数据库会自动加上行锁。但是&#xff0c;行锁有时也会失效。 数据库版本&a…

正则表达式 - 边界

目录 一、零宽断言 二、行的开始和结束 1 . ^ 与 $ 2. dotall 模式 三、单词边界和非单词边界 1. 统计某个单词出现的次数 2. 统计单词个数 四、主题词的起始与结束位置 五、使用元字符的字面值 六、在段首加标签 一、零宽断言 断言&#xff08;assertions&#xff0…

颜色选择器vue3-colorpicker

其他选择器&#xff1a;一款支持vue3 的颜色选择器 | ColorPickerV3基于vue3的颜色选择器支持颜色透明度与rgba、hexhttps://colorpickerv3.wcrane.cn/guide/#%E7%89%B9%E7%82%B9 这个选择器也挺好看的&#xff0c; 只是貌似不能外部打开选择器面板 官网&#xff1a;Webpack Ap…

第五章:多表查询

一、笛卡尔积的多表查询 1.案例 查询员工名为’Abel’的员工在哪个城市工作? 2.出现笛卡尔积&#xff08;交叉连接&#xff09;的错误 select employee_id, department_name from employees,departments为什么出现2889条记录&#xff1f; Employees 107 Departments 27 …