css层叠性,继承性,优先级

news/2024/9/25 4:23:43/

前言

  本文概要:讲述css的三大特性,层叠,继承和优先级。

层叠性

描述:我们试想以下这种情况:我们定义了同一个选择器,但是定义的属性不同。属性有相同的也有不同的,那么最后我们这个页面会听谁的。层叠性就是针对这种情况。

层叠性原则:所有相同选择器的属性合起来,相同的属性后定义的覆盖前定义的。

案例演示:

css">    <style>div {background-color: blue;color: aqua;}div {background-color: darkmagenta;}</style>
</head><body><div>猜猜谁管事?</div>
</body></html>

结果如下:

总结一句话:不冲突一起上,冲突了后来居上。

继承性

描述:这种特性是针对文字,颜色的样式。总结就是:父标签的文字及颜色行高样式,如果子标签没有额外定义,那么就会直接用父标签文字的样式进行显示。

继承属性:text,line,color这类跟文字有关的标签。

案例演示:(body标签是一切内容标签的父标签,我们给body标签设置文字属性看看)

css">    <title>Document</title><style>body {color: bisque;font: 700 20px/1.5 "微软雅黑";}</style>
</head><body><div>猜猜谁管事?</div>
</body></html>

结果如下:

可以看到给body设置的文字属性直接就被子标签div给继承了。

上面的1.5是行高,可以写20px这类的固定行高,上面这个写法是文字的型号的1.5倍。后面给子标签设置文字大小的话行高会跟着子标签变化。

优先级

优先级:

越往下优先级越高。

描述:在相同优先级的情况下我们有层叠性,但是这种不同的选择器我们会根据他的优先级进行判定。

复合选择器的优先级:

复合选择器是一种加法

比如div p是两个元素选择器,他们都是0,0,0,1,相加就是0,0,0,2

看上面权重是四个数,我们复合选择器会相加

这里假设两个数:1,2,6,4和2,6,8,2

他们依次从左往右比较,相同比较下一位,得到大的一个。

上面两个2,6,8,2最右侧大,则听他的。


http://www.ppmy.cn/news/1427332.html

相关文章

园区巡检机器人能解决哪些问题?

在当今城市化快速发展的背景下&#xff0c;园区管理成为了城市管理的重要组成部分。然而&#xff0c;随着园区规模的不断扩大和管理需求的日益增加&#xff0c;传统的园区巡检方式已经无法满足对园区安全、环境监测和设施维护的需求。人工巡检存在着效率低、覆盖范围有限、安全…

【SpringBoot实战篇】获取用户详细信息

1 明确需求 1需要获取用户详细信息 2 接口文档 1基本信息 2请求参数 无 3 响应数据 响应数据类型&#xff1a;application/json 响应参数说明&#xff1a; 响应数据样例 3 思路分析 1用户名在请求头里获取 4 开发 4.1 控制器usercontroller GetMapping("/userInfo")p…

多语言vue-i18n (vue2,uniapp)

安装vue-i18n npm install vue-i18n8 --save // npm install vue-i18n–save 9版本需要vue3.0 // 在vue2环境下&#xff0c;默认安装 npm install vue-i18n 的版本是 vue-i18n9.2.2&#xff0c; // 报错信息里提示这个版本要求是vue3&#xff0c;所以我们安装适合vue2版本的vu…

从入门到精通C++之类和对象(续)

目录 初始化列表构造函数&#xff1f;拷贝构造&#xff1f;浅谈explicit关键字友元 内部类static成员总结 初始化列表 引入初始化列表&#xff1a;简化代码&#xff0c;提高效率 在编程中&#xff0c;初始化列表是一种用于在创建对象时初始化成员变量的快捷方式。通过初始化列…

html select 支持内容过滤列表 -bootstrap实现

实现使用bootstrap-select插件 http://silviomoreto.github.io/bootstrap-select <!DOCTYPE html> <html> <meta charset"UTF-8"> <head><title>jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title>&…

SQLite轻量级会话扩展(三十四)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite R*Tree 模块&#xff08;三十三&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 1. 引言 会话扩展提供了一种方便记录的机制 对 SQLite 数据库中某些表的部分或全部更改&#xff0c;以及 将这些…

【代理模式】静态代理-简单例子

在Java中&#xff0c;静态代理是一种设计模式&#xff0c;它涉及到为一个对象提供一个代理以控制对这个对象的访问。静态代理在编译时就已经确定&#xff0c;代理类和被代理类会实现相同的接口或者是代理类继承被代理类。客户端通过代理类来访问&#xff08;调用&#xff09;被…

linux离线安装mysql

一、下载mysql 地址&#xff1a;MySQL 这里选择64为还是32为要根据操作系统来 uname -m 二、上传解压配置mysql 使用root账户登录linux服务器&#xff0c;在opt文件下创建mysql文件夹 cd /opt sudo mkdir mysql 使用Xftp上传mysql压缩包到此文件夹下(自行决定路径) cd mysql/…