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

CSS|05 继承性与优先级

news 2026/2/8 22:35:02

继承性

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

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/31 7:23:48

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/12/18 6:00:45

Kafka主题运维全指南：从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

编程新知 2025/6/10 21:14:43