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

1.CSS的三大特性

news 2025/10/22 6:26:14

css有三个非常重要的三个特性：层叠性、继承性、优先级

1.1 层叠性

想通选择器给设置想听的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要是解决样式冲突的问题。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: red;}div {color: pink;}</style>
</head>
<body><div>长江后浪推前浪，前浪死在沙滩上</div>
</body>
</html>

层叠性原则：

  • 样式冲突，遵循就近原则
  • 样式不冲突，不会层叠

1.2 继承性

现实中的继承，我们继承了父亲的姓

CSS中的继承，子标签会继承父标签的某些样式，如文本颜色和自豪，简单的理解就是：子承父业

  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性
  • 子元素可以继承父元素的样式（text,font,line-这些元素开头的可以继承，以及color属性）
  • 继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: pink;font-size: 14px;}</style>
</head>
<body><div><p>龙生龙，凤生凤，老鼠生的孩子会打洞</p></div>
</body>
</html>

1.2.1行高继承

body {

font:12px/1.5 Microsoft YaHei;

}

  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5
  • 此时子元素的行高是：当前资源素的文字大小*1.5

1.3 优先级

当同一个元素的指定多个选择器，就会有优先级产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行
选择器选择器权重
继承 或者 *0
元素选择器1
类选择器、伪类选择器10
ID选择器100
行内样式 style=""1000
!important∞无穷大

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: pink!important;}.test {color: red;}#demo {color: green;}</style>
</head>
<body><div class="test" id="demo" style="color: purple;">你笑起来真好看</div></body>
</html>

注意事项：

  • 权重是有4组数字组成的，但是不会有进位。
  • 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，依此类推
  • 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
  • 可以简单记忆法：通配符和继承权重为0,标签选择器为1，类选择器10，id选择器100，行内样式表1000,!important无穷大
  • 继承的权重是0：,如果钙元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#father {color: red;}p {color: pink;}</style>
</head>
<body><div id="father"><p>你还是很好看</p></div>
</body>
</html>

权重叠加：如果是复合选择器，则会有权叠加，需要计算权重

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {color: red;}ul li {color: rgb(37, 74, 37);}.nav li {color: pink;}</style>
</head>
<body><ul class="nav"><li>大猪蹄子</li><li>大肘子</li><li>猪尾巴</li></ul>
</body>
</html>

 div ul li ------>0,0,0,3

.nav ul li ------>0,0,1,2

a:hover ------>0,0,1,1

.nav a  -------->0,0,1,1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav li{color: red;}li {color: pink;}.nav .pink {color: pink;font-weight: 700;}</style>
</head>
<body><ul class="nav"><li class="pink">人生四大悲</li><li>家里没宽带</li><li>网速不够快</li><li>手机没流量</li><li>学校没wifi</li></ul>
</body>
</html>

相关文章：

1.CSS的三大特性

css有三个非常重要的三个特性&#xff1a;层叠性、继承性、优先级 1.1 层叠性 想通选择器给设置想听的样式&#xff0c;此时一个样式就会覆盖&#xff08;层叠&#xff09;另一个冲突的样式。层叠性主要是解决样式冲突的问题。 <!DOCTYPE html> <html lang"en&…...

编程日记 2025/1/24 6:18:16

【分布式日志篇】从工具选型到实战部署：全面解析日志采集与管理路径

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2025/1/24 6:17:15

基于springcloud汽车信息分析与可视化系统

基于Spring Cloud的汽车信息分析与可视化系统是一款旨在整合、分析汽车相关数据并以直观可视化方式呈现的应用系统。 一、系统架构 该系统基于先进的Spring Cloud架构构建&#xff0c;充分利用其分布式、微服务特性&#xff0c;确保系统具备高可用性、可扩展性和灵活性。Spri…...

编程日记 2025/1/24 6:16:13

TOGAF之架构标准规范-信息系统架构 | 数据架构

TOGAF是工业级的企业架构标准规范&#xff0c;信息系统架构阶段是由数据架构阶段以及应用架构阶段构成&#xff0c;本文主要描述信息系统架构阶段中的数据架构阶段。 如上所示&#xff0c;信息系统架构&#xff08;Information Systems Architectures&#xff09;在TOGAF标准规…...

编程日记 2025/1/24 6:12:09

Databend x 沉浸式翻译 | 基于 Databend Cloud 构建高效低成本的业务数据分析体系

「沉浸式翻译」是一个非常流行的双语对照网页翻译扩展工具&#xff0c;用户可以用它来即时翻译外文网页、PDF 文档、ePub 电子书、字幕等。它不仅可以实现原文加译文实时双语对照显示&#xff0c;还支持 Google、OpenAI、DeepL、微软、Gemini、Claude 等数十家翻译平台服务的自…...

编程日记 2025/1/24 6:11:08

cuda的并行运算介绍

cuda是如何使用GPU并行运算的&#xff1a; 以一个函数为例&#xff1a; duplicateWithKeys << <(P 255) / 256, 256 >> > (P,geomState.means2D,geomState.depths,geomState.point_offsets,binningState.point_list_keys_unsorted,binningState.point_list_…...

编程日记 2025/1/24 6:10:07

「全网最细 + 实战源码案例」设计模式——抽象工厂模式

核心思想 抽象工厂模式是一种创建型设计模式&#xff0c;它提供一个接口&#xff0c;用于创建一系列相关或互相依赖的对象&#xff0c;而无需指定它们的具体类。抽象工厂模式解决了产品族的问题&#xff0c;可以管理和创建一组相关的产品。 结构 1. 抽象工厂 定义创建一些列…...

编程日记 2025/1/24 6:09:06

领域驱动设计（DDD）四 订单管理系统实践步骤

以下是基于 领域驱动设计&#xff08;DDD&#xff09; 的订单管理系统实践步骤&#xff0c;系统功能主要包括订单的创建、更新、查询和状态管理&#xff0c;采用 Spring Boot 框架进行实现。 1. 需求分析 订单管理系统的基本功能&#xff1a; 订单创建&#xff1a;用户下单创…...

编程日记 2025/1/24 6:08:05

leetcode 面试经典 150 题：简化路径

链接简化路径题序号71题型字符串解法栈难度中等熟练度✅✅✅ 题目 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 ‘/’ 开头&#xff09;&#xff0c;请你将其转化为 更加简洁的规范路径。 在 Unix 风格的文件系统中规则如下…...

编程日记 2025/1/24 6:07:04

基于 STM32 的智能农业温室控制系统设计

1. 引言 随着农业现代化的发展&#xff0c;智能农业温室控制系统对于提高农作物产量和质量具有重要意义。该系统能够实时监测温室内的环境参数&#xff0c;如温度、湿度、光照强度和土壤湿度等&#xff0c;并根据这些参数自动调节温室设备&#xff0c;如通风扇、加热器、加湿器…...

编程日记 2025/1/24 6:03:00

【Spring Boot】掌握 Spring 事务：隔离级别与传播机制解读与应用

前言 &#x1f31f;&#x1f31f;本期讲解关于spring 事务传播机制介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话…...

编程日记 2025/1/24 5:58:57

【Postgres_Python】使用python脚本将多个PG数据库合并为一个PG数据库

需要合并的多个PG数据库表个数和结构一致&#xff0c;这里提供一种思路&#xff0c;选择sql语句insert插入的方式进行&#xff0c;即将其他PG数据库的每个表内容插入到一个PG数据库中完成数据库合并 示例代码说明&#xff1a; 选择一个数据库导出表结构为.sql文件&#xff08…...

编程日记 2025/1/24 5:57:56

Tailwind CSS v4.0 发布

Holy shit its actually done &#xff01; 1 月 22 日&#xff0c;Tailwind CSS 正式发布了 4.0 版本&#xff0c;针对性能和灵活性进行了优化&#xff0c;重新构想了配置和定制体验&#xff0c;并充分利用了 Web 平台提供的最新进展。 新的高性能引擎- 完整构建速度提高 5 …...

编程日记 2025/1/24 5:54:53

pandas基础：文件的读取和写入

文件的读取和写入 读取csv文件 csv文件&#xff1a; name,age,city Alice,25,New York Bob,30,Los Angelesread_csv(filename) header&#xff1a;如 何处理文件的第一行。header0将第一行作为列名&#xff0c;headerNone表示文件中没有列名&#xff0c;所有行都是数据。 im…...

编程日记 2025/1/24 5:52:50

【MySQL — 数据库增删改查操作】深入解析MySQL的create insert 操作

数据库CRUD操作 1 CRUD简介 CURD是对数据库中的记录进行基本的增删改查操作: 2. Create 新增 语法 INSERT [INTO] table_name[(column [&#xff0c;column] ...)] VALUES(value_list)[&#xff0c;(value_list)] ... # value 后面的列的个数和类型&#xff0c;要和表结构匹配…...

编程日记 2025/1/24 5:50:48

每日OJ_牛客_小红的子串_滑动窗口+前缀和_C++_Java

目录 牛客_小红的子串_滑动窗口前缀和 题目解析 C代码 Java代码 牛客_小红的子串_滑动窗口前缀和 小红的子串 描述&#xff1a; 小红拿到了一个长度为nnn的字符串&#xff0c;她准备选取一段子串&#xff0c;满足该子串中字母的种类数量在[l,r]之间。小红想知道&…...

编程日记 2025/1/24 5:49:47

HTTP 配置与应用（局域网）

想做一个自己学习的有关的csdn账号&#xff0c;努力奋斗......会更新我计算机网络实验课程的所有内容&#xff0c;还有其他的学习知识^_^&#xff0c;为自己巩固一下所学知识&#xff0c;下次更新HTTP 配置与应用&#xff08;不同网段&#xff09;。 我是一个萌新小白&#xf…...

编程日记 2025/1/24 5:46:44

ultralytics 是什么？

ultralytics 是一个用于计算机视觉任务的 Python 库&#xff0c;专注于提供高效、易用的目标检测、实例分割和图像分类工具。它最著名的功能是实现 YOLO&#xff08;You Only Look Once&#xff09; 系列模型&#xff0c;特别是最新的 YOLOv8。 1. YOLO 是什么&#xff1f; YO…...

编程日记 2025/1/24 5:45:43

AI竞争：从技术壁垒到用户数据之争

标题&#xff1a;AI竞争&#xff1a;从技术壁垒到用户数据之争 文章信息摘要&#xff1a; AI市场呈现开放模型与封闭模型并存的双轨发展态势&#xff0c;但核心竞争力已从模型技术转向用户数据积累和使用习惯培养。商业模式正在多元化发展&#xff0c;从早期的价格战转向subsc…...

编程日记 2025/1/24 5:43:41

MySQL 主从复制(单组传统复制，GTID复制。双主复制)

案例环境 单组复制 master&#xff1a; 192.168.180.143 slave01&#xff1a;192.168.180.144 双组复制 master01&#xff1a;192.168.180.143 master02&#xff1a;192.168.180.144 案例过程 准备工作 关闭所有防火墙 setenforce 0 && systemctl stop firewa…...

编程日记 2025/1/24 5:42:39

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/10/21 1:26:37

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/10/18 6:57:33

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/10/11 16:53:56

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/10/21 5:13:05

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/10/5 22:11:45

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/10/18 4:35:35

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/10/3 0:17:23