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

1.CSS的三大特性

news 2026/2/2 14:44:43

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/1 8:54:51

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2026/1/31 4:37:40

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2026/1/30 12:22:15

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2026/1/28 9:22:13