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

CSS|05 继承性与优先级

news 2026/5/23 15:35:19

继承性

一、继承性的特点：
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

Google I/O 2026 全解析：从 Gemini 3.5 到 AI 智能体，一文看懂谷歌的 AI 全景布局

摘要&#xff1a; Google I/O 2026 盛大开幕&#xff0c;官方正式发布了 Gemini 3.5 Flash、Antigravity 2.0、Gemini Spark 个人智能体、全新 AI 搜索范式以及智能音频眼镜等一系列颠覆性技术。本文将为你全面梳理本次大会的核心干货&#xff0c;透视谷歌在智能体时代的全新战…...

编程新知 2026/5/23 14:42:45

告别手动下载烦恼！DouK-Downloader让抖音/TikTok数据采集变得简单

告别手动下载烦恼&#xff01;DouK-Downloader让抖音/TikTok数据采集变得简单 【免费下载链接】TikTokDownloader TikTok 发布/喜欢/合辑/直播/视频/图集/音乐&#xff1b;抖音发布/喜欢/收藏/收藏夹/视频/图集/实况/直播/音乐/合集/评论/账号/搜索/热榜数据采集工具/下载工具 …...

编程新知 2026/5/23 14:04:37

BE-ToF技术：突破远距离深度成像的创新方案

1. BE-ToF技术概述&#xff1a;突破远距离深度成像的瓶颈深度感知技术在现代计算机视觉系统中扮演着越来越重要的角色&#xff0c;特别是在自动驾驶、机器人导航和三维重建等领域。时间飞行(Time-of-Flight, ToF)成像作为深度感知的主流技术之一&#xff0c;其性能直接决定了这…...

编程新知 2026/5/23 13:56:15

洛雪音乐音源配置完全指南：免费搭建个人音乐库的终极方案

洛雪音乐音源配置完全指南&#xff1a;免费搭建个人音乐库的终极方案 【免费下载链接】lxmusic- lxmusic(洛雪音乐)全网最新最全音源 项目地址: https://gitcode.com/gh_mirrors/lx/lxmusic- 洛雪音乐作为一款强大的音乐播放工具&#xff0c;提供了全网最新最全的音源资…...

编程新知 2026/5/23 12:51:10

深度学习实验十大模式与反模式：工业级可复现性实战指南

1. 项目概述&#xff1a;为什么这十个模式与反模式值得你花一整周反复咀嚼 “Ten Patterns and Antipatterns of Deep Learning Experimentation”——这个标题乍看像一篇学术综述&#xff0c;但在我带过27个工业级AI项目、亲手调试过412次模型训练失败日志、在三个不同行业的M…...

编程新知 2026/5/23 12:28:56

轨迹在线识别导向的3D折线焊缝机器人摆动GMAW实时跟踪系统【附程序】

✨ 长期致力于3D折线焊缝、机器人、GMAW、轨迹在线识别、焊缝跟踪研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;基于激光位移传感与密度聚类点云在线…...

编程新知 2026/5/23 12:24:35

Mac应用卸载不干净？Pearcleaner帮你彻底清理，释放存储空间

Mac应用卸载不干净&#xff1f;Pearcleaner帮你彻底清理&#xff0c;释放存储空间 【免费下载链接】Pearcleaner A free, source-available and fair-code licensed mac app cleaner 项目地址: https://gitcode.com/gh_mirrors/pe/Pearcleaner 你是否曾发现&#xff0c;…...

编程新知 2026/5/23 10:01:48

7. 线程编程（线程概念和创建）

线程的创建 #include <pthread.h> int pthread_create(pthread_t *thread, const pthread_attr_t *attr, void *(*routine)(void *), void *arg); 成功返回0&#xff0c;失败时返回错误码 thread 线程对象 attr 线程属性&#xff0c;NULL代表默认属性 routine 线程执行…...

编程新知 2026/5/23 9:50:39

张雪机车五夺WSBK分站冠军，海光信息成国产芯片一哥，硬核科技崛起！

张雪机车&#xff1a;WSBK赛场五度夺冠 昙花一现&#xff1f;不&#xff0c;现在都五现了。5月16 - 17日的WSBK捷克站&#xff0c;车手德比斯驾驶张雪机车820RR赛车&#xff0c;连续两回合夺冠。这是张雪机车本赛季第五个WSBK分站冠军。 如果说最早一次的夺冠是处于“新车优待期…...

编程新知 2026/5/23 9:28:41

基于 Vibe Coding 的 OJ 平台

基于 Vibe Coding 的 OJ 平台 Github: https://github.com/wjlwjlwjlwjl-cmd/vibe-coding-based-oj-platform Gitee: https://gitee.com/wangs-joyful-home/vibe-coding-based-oj-platform 一个类 LeetCode 的在线编程评测平台&#xff0c;支持题目管理、代码提交、自动判题、提…...

编程新知 2026/5/23 8:16:08