当前位置： 首页 > news >正文

CSS|05 继承性与优先级

news 2025/6/29 23:37:22

继承性

一、继承性的特点：
1.外层元素身上的样式会被内层元素所继承
2.如果内层元素与外层元素身上的演示相同时，外层元素的样式会被内层元素所覆盖

二、关于继承性的问题

是不是所有样式都能被继承？
答：并不是所有样式能被继承，只有文本与字体样式属性能被继承，其他样式属性不能被继承

解释如下：

body{
color: #f00;
font-size: 36px;
}

div{
coLor: #00f;
/给div标签来一个边框/
border：1px solid #ccc
}

给 div 标签来一个边框 border：1px solid #ccc，div 标签相对于 h2 标签和p 标签来说 它是一个外层元素。
现在给外层元素设置一个边框的样式，这个边框会不会被继承。

三、注意事项
在实际工作中，我们往往会给 boby 标签设置字体大小以及字体颜色，因为 boby 标签是最外层的元素，内层的元素会继承外层的元素样式。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>继承性</title><style type="text/css">/*如果内层元素与外层元素身上的样式相同，会被内层样式覆盖*/body{color: #f00; /*红色*/}div{color: #00f; /*蓝色*/border: 1px solid #ccc;}</style>
</head>
<body><div><h2>彷徨之刃</h2><p>《彷徨之刃》根据东野圭吾同名小说改编，讲述了少女李芊被三名未成年少年罗志诚、谢宇、王天笑绑架，凌虐后致死并抛尸，然而少年们对自己的作恶行为不以为意，事后还以凌辱少女的视频为乐，李芊的父亲李长峰决定用自己的方式让少年们付出代价，他亲手处决了王天笑，踏上了一条无法回头的复仇路。           </p></div>
</body>
</html>

在这里插入图片描述

优先级

一、先级的排序
行内样式> ID选择器>类选择器>标签选择器

二、优先级计算的方式
一般而言，选择器指向的越准确，优先级就会越高，通常我们会用1表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示 ID 选择器的优先级，用1000来表示行内样式

标签选择题 1
类选择器 10
ID选择器 100
行内样式 1000
值越大表示其优先级越高。

不管是单个选择器还是多个选择器组合他们之前的优先级都可以通过上面这个公式来进行计算，我们将其只称之为权重值权重值越大，就会表示其优先级越高。

范例：
div h2{ /*1+1 =2 */
color: #ccc;
}
.d h2{ /10+1 =11/
coLor: #000;
}
#dd h2{ /100+1 =101/
color: #f00;
}

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>优先级</title><style type="text/css">/*给div标签设置样式*//*标签选择器*//*div{color: #f00;}/*类选择器*//*.d{color: #00f;}*//*id选择器*//*#dd{color: #0f0;}*/div h2{  /* 1+1=2*/color: #ccc; /*灰色*/}.d h2{ /*10+1=11*/color: #000; /*黑色*/}#dd h2{ /*100+1=101*/color: #f00; /*红色*/}</style>
</head>
<body><div class="d" id='dd' style="color: skyblue;"><h2>彷徨之刃</h2><p>《彷徨之刃》根据东野圭吾同名小说改编，讲述了少女李芊被三名未成年少年罗志诚、谢宇、王天笑绑架，凌虐后致死并抛尸，然而少年们对自己的作恶行为不以为意，事后还以凌辱少女的视频为乐，李芊的父亲李长峰决定用自己的方式让少年们付出代价，他亲手处决了王天笑，踏上了一条无法回头的复仇路。           </p></div>
</body>
</html>

在这里插入图片描述

！Important 属性

一、什么是 important
important 在英文中含义是“重要的”意思

二、!important 在 CSS 中的作用
它主要是用来提升属性的女重。其属性的权重值无穷大

三、语法格式

使用！Important属性的语法格式
属性：值 ！Important

使用！important 一定要注意以下几点：
1.！important 它是提升的属性的权重，而不是提升选择器的权重！
文本的颜色是添加了！important 的属性， 文本的大小是添加的ID 选择器的 因为！important 它只是提升了属性的权重并没有提升选择器的优先级。

2.！important 它不能提升继承过来的权重!

案例1：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>!important</title><style type="text/css">/*使用！important属性的语法格式属性:值 !important;！important 提升的是属性的优先级，不是选择器   */p{color: #f00 !important;font-size: 20px;}.p1{color: #0f0;}#p2{color: #00f;font-size: 100px;}</style>
</head>
<body><p class="p1" id="p2">哈哈</p>
</body>
</html>

在这里插入图片描述
案例2：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>!important不能提升继承过来的权重</title><style type="text/css">div{color: #f00 !important;  /*不能提升继承过来的权重，仍显示绿色*/}p{color: #0f0;}</style>
</head>
<body><div><p class="p1" id="p2">哈哈</p></div>
</body>
</html>

在这里插入图片描述

一个标签内可以携带多个类名

类名：class 的属性值。
一个标签内可以携带多个类名，指的是 class 的属性值可以有多个，每一个属性值之间使用空格分隔。例子：<标签名 class = ”值1 值2 值3”></标签名>多个类名的优点：1.减少 css 的代码量2.多个类名的样式会叠加到当前元素上面缺点：一个标签内有多个类名，它们设置的样式如果一样，那么就会存在样式冲突以 css 中的代码作为标准，谁写在后面就以谁作为标准，和 HTML 中的 class 属性值顺序没有关系。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>多个类名</title><style type="text/css">/*先给class=div1的这个元素将其内容设置为加粗效果给class=div2的这个元素将其内容颜色设置红色给class=div3的这个元素将其内容设置加粗红色*/.div1{font-weight: bold;}.div2{color: #f00;}/*.div3{font-weight: bold;color: #f00;}*/</style>
</head>
<body><!--快捷键  div.div${哈哈$}*3 --><div class="div1">哈哈1</div><div class="div2">哈哈2</div><!-- 一个标签内携带多个类名 --><div class="div1 div2">哈哈3</div>
</body>
</html>

在这里插入图片描述
案例2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>样式冲突</title><style type="text/css">.cls1{color: #f00;}.cls2{color: #0f0;}</style>
</head>
<body><!-- 如果一个标签内多个类名，上面设置一样的话，就会出现样式冲突，那么就以css代码作为标准，谁在后面，就以谁作为设置标准 --><p class="cls1 cls2">文本一</p>
</body>
</html>

在这里插入图片描述

相关文章：

CSS|05 继承性与优先级

继承性 一、继承性的特点&#xff1a; 1.外层元素身上的样式会被内层元素所继承 2.如果内层元素与外层元素身上的演示相同时&#xff0c;外层元素的样式会被内层元素所覆盖 二、关于继承性的问题 是不是所有样式都能被继承&#xff1f; 答&#xff1a;并不是所有样式能被继承…...

编程日记 2024/6/28 11:35:51

KVM性能优化之内存优化(宿主机）

linux系统自带了一技术叫透明巨型页&#xff08;transparent huge page&#xff09;&#xff0c;它允许所有的空余内存被用作缓存以提高性能&#xff0c;而且这个设置是默认开启的&#xff0c;我们不需要手动去操作。 Centos下&#xff0c;我们用cat /sys/kernel/mm/transpare…...

编程日记 2024/6/28 11:30:47

【Linux杂货铺】Linux学习之路：期末总结篇1

第一章 什么是Linux? Linux 是 UNIX 操作系统的一个克隆&#xff1b;它由林纳斯 本纳第克特 托瓦兹从零开始编写&#xff0c;并在网络上众多松散的黑客团队的帮助下得以发展和完善&#xff1b;它遵从可移植操作系统接口&#xff08;POSIX&#xff09;标准和单一 UNIX 规范…...

编程日记 2024/6/28 11:27:44

GPT-5的到来：智能飞跃与未来畅想

IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂确认了GPT-5的发布计划&#xff0c;预计将在一年半后推出。穆拉蒂形象地将GPT-4到GPT-5的飞跃比作高中生到博士生的成长。这一飞跃将给我们带来哪些变化&#xff1f;GPT-5的…...

编程日记 2024/6/28 11:26:42

gin中间件

在web应用服务中&#xff0c;完整的业务处理在技术上包含客户端操作&#xff0c;服务端处理&#xff0c;返回处理结果给客户端三个步骤。但是在在更负责的业务和需求场景。一个完整的系统可能要包含鉴权认证&#xff0c;权限管理&#xff0c;安全检查&#xff0c;日志记录等多维…...

编程日记 2024/6/28 11:24:40

swagger常用注解

最近查看接口文档的时候发现&#xff0c;POST方法中的query没法在swagger中显示&#xff0c;查了才发现这是因为Swagger或OpenAPI规范默认将HTTP POST请求的参数识别为请求体&#xff08;body&#xff09;参数&#xff0c;而不是查询字符串&#xff08;query&#xff09;参数。…...

编程日记 2024/6/28 11:22:38

【Flink metric（1）】Flink指标系统的系统性知识：获取metric以及注册自己的metric

文章目录 一. Registering metrics&#xff1a;向flink注册新自己的metrics1. 注册metrics2. Metric types:指标类型2.1. Counter2.2. Gauge2.3. Histogram(ing)2.4. Meter 二. Scope:指标作用域1. User Scope2. System Scope ing3. User Variables 三. Reporter ing四. System…...

编程日记 2024/6/28 11:21:37

命令模式（Command Pattern）

命令模式&#xff08;Command Pattern&#xff09; 定义 命令模式是对命令的封装&#xff0c;每一个命令都是一个操作&#xff1a;请求的一方发出请求要求执行一个操作&#xff1b;接收的一方收到请求&#xff0c;并执行操作。 命令模式解耦了请求方和接收方&#xff0c;请求…...

编程日记 2024/6/28 11:19:35

掌握Symfony的模板继承：构建强大且灵活的Web界面

掌握Symfony的模板继承&#xff1a;构建强大且灵活的Web界面 在Symfony框架中&#xff0c;模板继承是一个强大的功能&#xff0c;它允许开发者创建可重用的布局模板&#xff0c;并通过扩展这些模板来构建具体的页面。这种机制不仅提高了代码的可维护性&#xff0c;还使得页面结…...

编程日记 2024/6/28 11:18:34

uboot基本使用网络命令和从服务器端下载linux内核启动

网络命令ip地址设置: setenv gmac_debug 0; setenv mdio_intf rgmii; setenv bootdelay 1; setenv ethaddr 00:xxxx:81:70; // mac地址 setenv ipaddr xxx; //开发板 IP 地址 setenv netmask 255.255.255.0; setenv gatewayip xxx.1; setenv serverip xxxx; //服…...

编程日记 2024/6/28 11:16:32

解决ArcGIS导出的svg格式的图片插入Word后的字体问题

背景 在ArcGIS中设置字体为Times New Roman&#xff0c;但导入Word后字体转为等线。 ArcGIS中的Layout 导入Word​​​​​​ 原因分析 Word无法识别嵌入进SVG格式文件中的字体。 解决方案 在Export Layer窗口中&#xff0c;将Embed fonts取消勾选&#xff0c;Convert cha…...

编程日记 2024/6/28 11:14:30

如何确保 Puppet 配置在复杂网络环境中的可靠分发和同步？

在复杂网络环境中确保 Puppet 配置的可靠分发和同步可以采取以下措施&#xff1a; 网络拓扑规划&#xff1a;在复杂网络环境中&#xff0c;首先需要进行网络拓扑规划&#xff0c;确保网络结构合理&#xff0c;并能够支持可靠的分发和同步机制。 Puppet Master 多节点部署&…...

编程日记 2024/6/28 11:13:29

2024最新！将mysql的数据导入到Solr

Solr导入mysql的数据 如何安装导入数据前准备配置Solr的Jar包以及Mysql驱动包1.1、将solr-8.11.3\dist下的两个包进行移动1.2、将mysql-connect包也移动到该位置1.3、重启Solr项目 配置xml2.1、第一步我们需要创建核心2.2、第二步修改xml(这里是结合19年的教程)2.3、 创建data-…...

编程日记 2024/6/28 11:11:27

Python数据分析第二课：conda的基础命令

Python数据分析第二课&#xff1a;conda的基础命令 1.conda是什么? conda是一个开源的包管理系统&#xff0c;可以帮助我们进行管理多个不同版本的软件包&#xff0c;还可以帮助我们建立虚拟环境&#xff0c;以便对不同的项目进行隔离。 简单来说&#xff0c;conda是一个软…...

编程日记 2024/6/28 11:10:26

LayoutInflater加载流程

简介 LayoutInflater在日常的Android开发中是经常使用的类&#xff0c;常常用于XML中View的加载相关流程。本文主要总结一些其常见api的源码流程。 获取LayoutInflater 我们一般会在Activity的onCreate方法中会通过setContentView方法设置自己的布局layoutId&#xff0c;Act…...

编程日记 2024/6/28 11:09:24

PLC数据采集案例

--------天津三石峰科技案例分享 项目介绍 项目背景 本项目为天津某钢铁集团下数字化改造项目&#xff0c;主要解决天津大型钢厂加氢站数字化改造过程中遇到的数据采集需求。项目难点PLC已经在运行了&#xff0c;需要采集里面数据&#xff0c;不修改程序&#xff0c;不影响P…...

编程日记 2024/6/28 11:08:23

基于单片机和ＬａｂＶＩＥＷ 的远程矿井水位监控系统设计

摘要 &#xff1a; 针 对 现 有 矿 井 水 位 监 控 系 统 存 在 结 构 复 杂 和 不 能 远 程 监 控 的 问 题 &#xff0c; 设计了基于单片机和&#xff2c;&#xff41;&#xff42;&#xff36;&#xff29;&#xff25;&#xff37; 的远程矿井水位监控系统 &#xff0c; 详…...

编程日记 2024/6/28 11:07:22

element 表格嵌套表单验证指定行

elementui表格嵌套动态表单&#xff0c;单独验证某一行输入项是否符合校验规则&#xff1b; input动态绑定校验 :prop"imgTable. scope.$index .bxName" <el-form :model"formTable" ref"formTable" inline size"small"><…...

编程日记 2024/6/28 11:03:18

CORE Mobility Errorr的调试

在运行CORE tutorial 3中的mobility示例时&#xff0c;出现如下错误&#xff1a; 当看到这个问题的时候&#xff0c;并没有仔细去分析日志和现象&#xff0c;在core-daemon的进程打印界面只看了一下最后的出错堆栈&#xff1a; 2024-06-27 10:43:48,614 - ERROR - _server:_ca…...

编程日记 2024/6/28 10:59:15

基于weixin小程序乡村旅游系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;旅游景点管理&#xff0c;景点类型管理&#xff0c;景点路线管理&#xff0c;系统管理 商家帐号账号功能包括&#xff1a;系统首页&#xff0c;旅游景点管理&…...

编程日记 2024/6/28 10:56:12

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/6/28 12:55:19

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/6/28 14:27:12

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/6/29 11:59:03

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/6/26 11:24:52

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/6/25 2:04:34

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/6/24 6:22:14

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/6/27 16:47:59

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/6/26 1:50:36

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/6/20 14:02:51

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/6/25 1:48:32