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

CSS三大特性——继承、优先级与层叠

article 2026/4/12 23:30:20

1. 层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆
盖）。
什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。 
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_三大特性-层叠</title><style>/* 概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。 */#id {color: aqua;font: bold italic 20px "隶书"}p{color: red;}</style>
</head><body><div><p id="id">哈哈</p></div></body></html>

 

2.继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性：text-?? ， font-?? ， line-?? 、 color ...... 
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_三大特性-继承</title><style>/* 体现了继承性 设置父代属性，其后代元素也会拥有概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。规则：优先继承离得近的。*/div {color: brown;}p{color: aqua;}</style>
</head><body><div><span>我是span里的<p>我是p里的<p><span>我是span里的</span></p></p></span></div>
</body></html>

3.优先级

简单聊： !important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > * > 继承的样
式。

1.简单聊

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器优先级_简单聊</title>
</head>
<style>/* 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 */*{color: red;}h2{color: blue;}.slogan{color: green;}#atguigu{color: aqua;}
</style><body><h2 style="color: black;"  class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术</h2></body></html>

2.详细聊

需要计算权重。 

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器优先级_详细聊 </title>
</head>
<style>/* 二个类选择器一个元素选择器 */.container span.slogan{font:bold italic 30px "华文琥珀";color: blue;}div>p>span:nth-child(1){color: red;}</style><body><div class="container"><p><span class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术！</span><hr><span>欢迎同学们来学习！</span></p></div></body></html>

特殊规则：
1. 行内样式权重大于所有选择器。
2. !important 的权重，大于行内样式，大于所有选择器，权重最高！

相关文章：

CSS三大特性——继承、优先级与层叠

1. 层叠性 概念&#xff1a;如果发生了样式冲突&#xff0c;那就会根据一定的规则&#xff08;选择器优先级&#xff09;&#xff0c;进行样式的层叠&#xff08;覆 盖&#xff09;。 什么是样式冲突&#xff1f; ——— 元素的同一个样式名&#xff0c;被设置了不同的值&…...

编程日记 2026/4/10 6:08:05

Java 中的方法参数传递与值传递

文章目录 Java 中的方法参数传递与值传递代码示例代码运行结果分析原因1. Java 中的参数传递机制2. 代码执行过程 值传递的图示如何实现真正的交换&#xff1f;1. 使用数组2. 使用对象 总结 Java 中的方法参数传递与值传递 在 Java 编程中&#xff0c;理解方法参数传递的机制是…...

编程日记 2026/3/10 1:30:25

敏捷开发06：用户故事估算方法介绍

估算介绍 在以前开发 IT 软件时&#xff0c;使用较多的衡量软件开发工作量的单位是&#xff1a;小时、人天 或 人月。它是预估开发时间。比如&#xff1a;这个功能张三一个人开发需要 3 天时间完成。 这种 “人天” 估算只是 “理想人天” 的估算&#xff0c;有时与实际开发完…...

编程日记 2026/4/11 22:05:01

在原有基础上的Python正则表达式终极指南，新增高级用法、复杂案例和底层原理分析

以下是Python正则表达式终极指南，新增高级用法、复杂案例和底层原理分析： Python正则表达式终极指南 一、正则表达式引擎原理 1. 回溯机制解析 NFA（非确定性有限自动机）工作原理回溯的产生场景及性能影响灾难性回溯案例：# 危险模式示例 re.match(r(a+)+b, aaaaaaaaac) …...

编程日记 2025/6/21 7:29:07

进制转换及C语言中进制转换方法

进制转换是计算机科学和数学中的基础操作&#xff0c;主要用于不同数制之间的数值表示转换。以下是常见进制&#xff08;二进制、八进制、十进制、十六进制&#xff09;的转换方法及示例&#xff1a; 一、其他进制 → 十进制 方法&#xff1a;按权展开&#xff0c;逐位相加。 …...

编程日记 2025/12/30 0:37:49

【我要成为配环境高手】node卸载与nvm安装

node卸载与nvm安装 1. node卸载 参考了这篇文章&#xff1a; https://blog.csdn.net/weixin_43801036/article/details/141487791 2. nvm安装 参考了这两篇文章&#xff1a; https://www.cnblogs.com/rnny/p/17839190.html#tid-z7A3nR https://blog.csdn.net/weixin_45811…...

编程日记 2026/3/8 9:57:09

环境变量与本地变量

目录 本地变量的创建 环境变量VS本地变量 认识完了环境变量我们来认识一下本地变量。 本地变量的创建 我们如果直接env是看不到本地变量的&#xff0c;因为本地变量和环境变量都具有独立性&#xff0c;环境变量是系统提供的具有全局属性的变量&#xff0c;都存在bash进程的…...

编程日记 2026/4/9 7:20:42

Docker安装Kafka（不依赖ZooKeeper）

创建docker-compose.yaml version: "3.9" #版本号 services:kafka:image: apache/kafka:3.9.0container_name: kafkahostname: kafkaports:- 9092:9092 # 容器内部之间使用的监听端口- 9094:9094 # 容器外部访问监听端口environment:KAFKA_NODE_ID: 1KAFKA_PROCES…...

编程日记 2026/4/2 6:57:57

Visual Studio中打开多个项目

1) 找到解决方案窗口 2) 右键添加→ 选择现有项目 3) 选择.vcxproj文件打开即可...

编程日记 2026/4/7 13:16:25

rust笔记7-生命周期显式标注

Rust 的生命周期（Lifetimes）是 Rust 内存安全模型的核心部分，用于确保引用始终有效，避免悬垂引用（Dangling References）。下面我们从生命周期的设计出发点、标注语法以及在不同上下文中的应用（函数、方法、结构体、trait 等）来详细介绍。 1. 生命周期设计的出发点 Rus…...

编程日记 2026/4/5 8:58:01

广西壮族自治区园区投促中心党委书记陶德文率团到访深兰科技

2月16日&#xff0c;广西壮族自治区园区投促中心党委书记、主任&#xff0c;自治区园区办党组成员陶德文率团来到深兰科技集团上海总部考察调研&#xff0c;并与深兰科技集团创始人、董事长陈海波等集团管理层座谈交流&#xff0c;双方围绕深兰科技人工智能项目落地广西的相关事…...

编程日记 2026/4/12 19:33:50

1005 K 次取反后最大化的数组和（贪心）

文章目录 题目[](https://leetcode.cn/problems/maximize-sum-of-array-after-k-negations/)算法原理源码总结 题目 如上图&#xff0c;k是取反的次数&#xff0c;在数组【4&#xff0c;-1,3】中&#xff0c;当k 1&#xff0c;把-2取反为2&#xff0c;和为9&#xff1b;在数组…...

编程日记 2026/4/11 16:30:22

Softing线上研讨会 | 自研还是购买——用于自动化产品的工业以太网

| 线上研讨会时间&#xff1a;2025年1月27日 16:00~16:30 / 23:00~23:30 基于以太网的通信在工业自动化网络中的重要性日益增加。设备制造商正面临着一大挑战——如何快速、有效且经济地将工业以太网协议集成到其产品中。其中的关键问题包括&#xff1a;是否只需集成单一的工…...

编程日记 2026/4/3 20:56:25

SpringBoot整合Redis和Redision锁

参考文章 1.Redis 1.导入依赖 <!--Redis依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>org.apache.c…...

编程日记 2026/4/5 17:43:17

【Pandas】pandas Series rename_axis

Pandas2.2 Series Computations descriptive stats 方法描述Series.align(other[, join, axis, level, …])用于将两个 Series 对齐&#xff0c;使其具有相同的索引Series.case_when(caselist)用于根据条件列表对 Series 中的元素进行条件判断并返回相应的值Series.drop([lab…...

编程日记 2026/4/3 21:11:04

数仓搭建(hive):DM搭建(数据集市层)

DM层 数据集市层 &#xff08;Data Mart&#xff09; 粒度上卷&#xff08;Roll-up&#xff09;: 指的是沿着维度层次向上聚合汇总数据&#xff0c;从细粒度到粗粒度观察数据的操作。 示例 数仓的上一层DWS的是按日汇总 DM层基于DWS层主题日宽表上卷统计出按年,月,周的数…...

编程日记 2026/4/11 14:35:37

用LightRAG+智谱GLM-4提升政务对话精度：从知识图谱到精准问答的实战指南

在政务场景中&#xff0c;对话系统的精度至关重要&#xff0c;一个不准确的回答可能导致政策误解甚至行政失误。LightRAG结合智谱GLM-4&#xff0c;通过知识增强&#xff08;如知识图谱、检索增强生成RAG和动态上下文&#xff09;显著提升问答准确性。本文从代码实现到架构优化…...

编程日记 2025/7/8 22:43:06

用 Python 实现 DeepSeek R1 本地化部署

DeepSeek R1 以其出色的表现脱颖而出&#xff0c;不少朋友想将其本地化部署&#xff0c;网上基于 ollama 的部署方式有很多&#xff0c;但今天我要带你领略一种全新的方法 —— 使用 Python 实现 DeepSeek R1 本地化部署&#xff0c;让你轻松掌握&#xff0c;打造属于自己的 AI…...

编程日记 2026/4/12 19:28:14

动态内存分配算法对比：最先适应、最优适应、最坏适应与邻近适应

动态内存分配算法对比&#xff1a;最先适应、最优适应、最坏适应与邻近适应 在操作系统中&#xff0c;动态内存分配算法用于管理空闲内存块的分配和回收。最先适应算法&#xff08;First Fit&#xff09;、最优适应算法&#xff08;Best Fit&#xff09;和最坏适应算法&#x…...

编程日记 2026/3/6 6:47:57

GitHub基本操作及Git简单命令

GitHub简介 GitHub就是一个远程仓库&#xff0c;远程仓库可以理解为就是一个可以保存自己代码的地方&#xff0c;在实际开发当中一个项目往往是有多个人来共同协作开发完成的&#xff0c;那么就需要一个统一代码保存的地方&#xff0c;而GitHub就是起到一个共享和汇总代码的作…...

编程日记 2026/4/12 4:50:18

AI工作流+专业知识库+系统API的全流程任务自动化

我有点悲观&#xff0c;甚至很沮丧&#xff0c;因为AI留给普通人的机会不多了&#xff0c;这既是人类之间权力的斗争&#xff0c;也是硅基生命和碳基生命的斗争。AI自动化是无法避免的趋势&#xff0c;如果人类不能平权&#xff0c;那就只能跪下接受审判。 通过整合AI工作流、专…...

编程日记 2026/4/12 22:42:47

C++深拷贝\浅拷贝

C 中的深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;是指在对象复制时&#xff0c;对象成员的复制方式不同。理解这两种拷贝构造方式非常重要&#xff0c;尤其是在涉及到动态内存分配和资源管理时。 浅拷贝&#xff08;Shallow Copy&…...

编程日记 2025/11/18 11:45:52

本地文件共享——HFS

目录 1.介绍&#xff1a; 2.下载&#xff1a; 3.开始使用&#xff1a; 1.介绍&#xff1a; HFS&#xff08;HTTP File Server&#xff09;是一款轻量级的本地文件共享软件&#xff0c;主要用于快速搭建一个基于网页的临时文件服务器&#xff0c;支持通过浏览器直接上传或下载…...

编程日记 2026/4/9 7:56:47

第十二届先进制造技术与材料工程国际学术会议 (AMTME 2025)

重要信息 大会官网&#xff1a;www.amtme.org&#xff08;了解会议&#xff0c;投稿等&#xff09; 大会时间&#xff1a;2025年3月21-23日 大会地点&#xff1a;中国-广州 简介 2025年第十二届先进制造技术与材料工程 (AMTME 2025) 定于2025年3月21-23日在中国广州隆重举…...

编程日记 2026/4/6 8:46:27

【Alertmanager】alertmanager告警系统原理剖析与应用实战，应有尽有非常全面

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全…...

编程日记 2026/4/6 6:33:16

C语言预处理学习笔记

1. 预处理器的功能 预处理器&#xff08;Preprocessor&#xff09;在编译C语言程序之前对源代码进行预处理。预处理指令以#号开头&#xff0c;主要包括文件包含、宏定义、条件编译等功能。 2. 文件包含 文件包含功能用于在一个文件中包含另一个文件的内容&#xff0c;通常用…...

编程日记 2025/8/11 18:32:16

jQuery AJAX 方法详解

jQuery AJAX 方法详解 引言 随着互联网技术的不断发展，前端开发领域的技术也在不断更新迭代。jQuery 作为一种广泛使用的前端JavaScript库，极大地简化了DOM操作和事件处理。在众多jQuery功能中，AJAX（Asynchronous JavaScript and XML）方法尤为突出，它允许我们在不重新加…...

编程日记 2025/10/21 10:59:11

C++之虚函数、虚函数表

C 虚函数、虚函数表详解与实践 C中虚函数是实现多态的重要技术&#xff0c;接下来将从汇编、以及gdb调试运行方面下手全面了解虚函数、虚函数表、以及虚函数调用。 原理初认识 一个由虚函数的类将会有一个虚函数表&#xff0c;且所有该类的实例化对象共享一个虚函数表。虚函…...

编程日记 2026/4/12 2:58:03

零基础学QT、C++（一）安装QT

目录 如何快速学习QT、C呢&#xff1f; 一、编译器、项目构建工具 1、编译器&#xff08;介绍2款&#xff09; 2、项目构建工具 二、安装QT 1、下载QT安装包 2、运行安装包 3、运行QT creator 4、导入开源项目 总结 闲谈 如何快速学习QT、C呢&#xff1f; 那就是项目驱动法&…...

编程日记 2026/4/11 22:41:32

Python SMTP 实现邮件发送功能

发送邮件的流程 登录我们邮箱&#xff0c; 书写接收者的邮箱&#xff0c; 书写题目与内容&#xff0c;添加附件&#xff0c; 点击发送。 邮件协议 smtp 是邮件发送的协议。pop3 是邮件接收的协议。 smtplib模块用法 创建协议对象&#xff1a;smtpObj smtplib.SMTP() 创建…...

编程日记 2026/4/10 15:30:24