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

1.CSS的三大特性

news 2025/12/16 17:01:00

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

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/12/15 16:57:42

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/12/15 10:47:12

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/11/27 17:18:52

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/12/9 10:21:27

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/12/14 5:03:24