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

CSS的三大特性

news 文章来源：https://blog.csdn.net/weixin_62588253/article/details/129477530 2025/1/15 23:45:37

🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的三大特性。知识学习内容来自b站的@黑马程序员的视频

🚩1.1 层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，比如两个div，一个div设置颜色与字体，另一个div设置不一样的颜色。那么就会选择后面的div的颜色和前面div的字体，因为只有颜色冲突了。

原则

样式冲突遵循就近原则，哪个样式设置距离标签更近，就执行哪个样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: red;font-size: 14px;}div {color: pink;}</style>
</head>
<div>层叠性</div><body></body></html>

🚩1.2 继承性

子标签会继承父标签的某些样式如文字的颜色和大小，最主要的就是和文字有关的如text-,font-,line-这些开头的属性，以及color。

常用情况：在body中设置整个页面的文字格式。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {color: pink;font-size: 14px;}</style>
</head><body><div><p>body已经给我设置好了</p></div>
</body></html>

行高的继承性

body {
font:12px/1.5 Microsoft Yahei
}

行高可以不跟单位，采用1.5表示字体大小的1.5倍。这样可以让子元素根据自己的文字大小自动调整行高

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {color: pink;font: 12px/1.5 Microsoft Yahei;}div {/* 继承了body的行高，这里是14*1.5=21px */font-size: 14px;}p {font-size: 16px;}</style>
</head>
<div>指定了自己的大小，行高继承为14*1.5px</div>
<p>指定了自己大小，行高继承为16*1.5排序</p>
<ul><li>没指定自己大小，行高继承为12*1.5</li>
</ul><body></body></html>

🚩1.3 优先性

当一个元素（标签）指定多个选择器，就会有优先级的问题。如果多个选择器选择了同一个元素，就要根据选择器自身的权重来判断。

选择器	选择器权重
继承或者*	0
元素选择器	1
类选择器，伪类选择器	10
id选择器	100
行内样式	1000

注意

继承的权重是0。例如body中指定的文字颜色，但是只要body中的标签有默认值，都会用标签自己的默认值。

复合选择器的权重

复合选择器中的权重会叠加。例如同时设置li和ul li，则用ul li的样式。又比如有.nav li和ul li，则执行.nav li，因为类选择器的权重更大。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav li {color: red;}.nav .pink {color: pink;font-weight: 800;}</style>
</head><body><ul class="nav"><li class="pink">aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul>
</body></html>

CSS的三大特性

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简…...

编程日记 2023/3/15 6:30:54

Linux-scheduler之负载均衡(二)

四、调度域 SDTL结构 linux内核使用SDTL结构体来组织CPU的层次关系 struct sched_domain_topology_level {sched_domain_mask_f mask; //函数指针，用于指定某个SDTL的cpumask位图sched_domain_flags_f sd_flags; //函数指针，用于指定某个SD…...

编程日记 2023/3/15 6:25:49

VScode第三方插件打开sqlite数据库

文章目录前言对比1.文本文件、表格软件打开2.专业软件3.pythonVScode 第三方库打开数据库1. 下载第三方库插件2.打开sqlite新建查询3.输入查询内容前言最近在做的东西涉及SQLite数据库（一种常用在移动端的数据库类型，和mysql这些主流数据库也差不多&am…...

编程日记 2023/3/15 6:20:47

Kafka 监控

Kafka 监控主机监控JVM 监控集群监控监控 Kafka 客户端主机监控主机监控 : 监控 Kafka 集群 Broker 所在的节点机器的性能主机监控指标 : 机器负载 (Load) , CPU 使用率内存使用率 (空闲内存 , 已使用内存 (Used Memory) )磁盘 I/O 使用率 (读使用率/ 写使用率) , 网络 I/…...

编程日记 2023/3/15 6:15:44

MultipartFile与File的互转前言MultipartFile转File1.FileUtils.copyInputStreamToFile转换2.multipartFile.transferTo(tempFile);3. (推荐）FileUtils.writeByteArrayToFile(file, multipartFile.getBytes());File转MultipartFile前言需求是上传Excel文件并读取E…...

编程日记 2023/3/15 6:10:41

数据结构与算法基础-学习-15-二叉树

一、二叉树定义二叉树是N（N>0）个节点的有限集，它可能是空集或者由一个根节点及两棵互不相交的分别称作这个根的左子树和右子树的二叉树组成。二、二叉树特点1、每个节点最多两个孩子。（也就是二叉树的度小于等于2）2…...

编程日记 2023/3/15 6:05:39

接口测试要测试什么?

一. 什么是接口测试？为什么要做接口测试？ 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换，传递和控制管理过程，以及系统间的相互…...

编程日记 2023/3/15 6:00:37

2023.03.12学习总结

项目部分写了内外菜单栏的伸缩，更新了导航栏，新增配置，scss变量提交记录学习了scss的使用和配置 ，设置了scss全局变量，组件样式给element-plus配置了主题颜色，配置到了全局 http://t.csdn.cn/FhZYa …...

编程日记 2023/3/15 5:55:35

数据结构入门6-1（图）

目录注图的定义图的基本术语图的类型定义图的存储结构邻接矩阵 1. 邻接矩阵表示法 2. 使用邻接矩阵表示法创建无向网 3. 邻接矩阵表示法的优缺点邻接表 1. 邻接表表示法 2. 通过邻接表表示法创建无向图 3. 邻接表表示法的优缺点十字链表（有向…...

编程日记 2023/3/15 5:50:34

把C#代码上传到NuGet，大佬竟是我自己！！！

背景刚发表完一篇博客总结自己写标准化C#代码的心历路程，立马就产生一个问题，就是我写好标准化代码后，一直存放磁盘的话，随着年月增加，代码越来越多，项目和版本的管理就会成为一个令我十分头疼的难题&…...

编程日记 2023/3/15 5:45:32

解决前端“\n”不换行问题

在日常开发过程中，换行显示是一种很常见的应用需求，但是偶然发现，有时候使用 "\n"并不会换行显示，只会被识别为空格，如下图。通过上图可以看出，"\n"它被识别成了一个空格显示&#…...

编程日记 2023/3/15 5:40:30

Python打包成exe，文件太大问题解决办法(比保姆级还保姆级)

首先我要说一下，如果你不在乎大小，此篇直接别看了，因为我写过直接打包的，就多20M而已，这篇就别看了，点击查看不在乎大小直接打包这篇我觉得简单的令人发指不废话，照葫芦画瓢就好第1步&#…...

编程日记 2023/3/15 5:35:28

CSS弹性布局flex属性整理

1.align-items align-items属性：指定弹性布局内垂直方向的对齐方向。常用属性： center 垂直居中展示 flex-start 头部对齐 flex-end 底部对齐 2. justify-content justify-content属性：属性（水平）对齐弹…...

编程日记 2023/3/15 5:30:26

14个你需要知道的实用CSS技巧

让我们学习一些实用的 CSS 技巧，以提升我们的工作效率。这些 CSS 技巧将帮助我们开发人员快速高效地构建项目。现在，让我们开始吧。 1.CSS :in-range 和 :out-of-range 伪类这些伪类用于在指定范围限制之内和之外设置输入样式。 (a) : 在范围内如…...

编程日记 2023/3/15 5:25:22

【Flutter从入门到入坑之四】构建Flutter界面的基石——Widget

【Flutter从入门到入坑】Flutter 知识体系【Flutter从入门到入坑之一】Flutter 介绍及安装使用【Flutter从入门到入坑之二】Dart语言基础概述【Flutter从入门到入坑之三】Flutter 是如何工作的 WidgetWidget 是什么呢？Widget 渲染过程WidgetElementRenderObjectR…...

编程日记 2023/3/15 5:20:19

中职网络空间安全windows渗透

目录 B-1：Windows操作系统渗透测试 1.通过本地PC中渗透测试平台Kali对服务器场景Windows进行系统服务及版本扫描渗透测试，并将该操作显示结果中Telnet服务对应的端口号作为FLAG提交；编辑 2.通过本地PC中渗透测试平台Kali对服务器场景Wind…...

编程日记 2023/3/15 5:15:17

普通二叉树的操作

普通二叉树的操作1. 前情说明2. 二叉树的遍历2.1 前序、中序以及后序遍历2.1.1 前序遍历2.1.2 中序遍历、后序遍历2.2 题目练习2.2.1 求一棵二叉树的节点个数2.2.2 求一棵二叉树的叶节点个数2.2.3 求一棵二叉树第k层节点的个数2.2.4 求一棵二叉树的深度2.2.5 在一棵二叉树中查找…...

编程日记 2023/3/15 5:10:15

Oracle：递归树形结构查询功能

概要树状结构通常由根节点、父节点（PID）、子节点（ID）和叶节点组成。查询语法SELECT [LEVEL],* FROM table_name START WITH 条件1 CONNECT BY PRIOR 条件2 WHERE 条件3 ORDER　BY　排序字段说明：LEVEL—伪列&#xff0…...

编程日记 2023/3/15 5:05:12

MongoDB数据库性能监控详解

目录一、MongoDB启动超慢1、启动日常卡住，根本不用为了截屏而快速操作，MongoDB启动真的超级慢~~2、启动MongoDB配置服务器，间歇性失败。3、查看MongoDB日志，分析“MongoDB启动慢”的原因。4、耗时“一小时”，MongoDB启…...

编程日记 2023/3/15 5:00:08

python不要再使用while死循环，使用定时器代替效果更佳！

在python开发的过程中，经常见到小伙伴直接使用while True的死循环sleep的方式来保存程序的一直运行。这种方式虽然能达到效果，但是说不定什么时候就直接崩溃了。并且，在Linux环境中在检测到while True的未知进程就会直接干掉。面对这样的…...

编程日记 2023/5/5 14:26:14

什么是接口测试？十年阿里测试人教你怎样做接口测试

一什么是接口？ 接口测试主要用于外部系统与系统之间以及内部各个子系统之间的交互点，定义特定的交互点，然后通过这些交互点来，通过一些特殊的规则也就是协议，来进行数据之间的交互。接口测试主要用于外部系统与系统之…...

编程日记 2023/3/15 4:50:00

1.10-1.12 Makefile

1. Makefile简介举个栗子，如下为redis-5.0.10的项目目录，有很多的文件有了Makefile文件，可以简单的make一下就可以对项目文件进行编译，最终生成可执行程序。 2. Makefile栗子1 首先，创建vim Makefile按照PPT里的格…...

编程日记 2023/3/15 4:39:50

Leetcode. 88合并两个有序数组

合并两个有序数组文章目录归并思路二归并核心思路： 依次比较，取较小值放入新数组中 i 遍历nums1 ， j 遍历nums2 ，取较小值放入nums3中那如果nums[i] 和nums[j]中相等，随便放一个到nums3 那如果nums[i] 和nums[j]中相…...

编程日记 2023/3/15 4:34:48

【数据库】数据库查询（进阶命令详解）

目录 1.聚合查询 1.1聚合函数 COUNT函数 SUM函数 AVG函数 MAX函数 MIN函数 1.2GROUP BY子句 1.3HAVING 2.联合查询 2.1内连接 2.2外连接 2.3自连接 2.4子查询 3.合并查询写在前面： 文章截图均是每个代码显示的图。数据库对代码大小写不敏感&am…...

编程日记 2023/3/15 4:29:47

参数缺省和函数重载讲解

一路风雨兼程磨砺意志，三载苦乐同享铸就辉煌目录 1.参数缺省的概念 2.参数缺省的用法 3.缺省参数分类 3.1.全缺省参数 3.2.半缺省参数 4.函数重载的概念 5.函数重载的用法 6.函数重载的原理 1.参数缺省的概念一般情况下，函数调用时的实参个数应…...

编程日记 2023/3/15 4:24:45

关于召开2023第八届国际发酵培养基应用发展技术论坛的通知

生物发酵培养基是影响产业技术水平、环境友好程度的重要影响因素，为进一步实现生物发酵培养基的稳定可控、高效生产以及绿色安全，进一步推动生物技术的创新升级、绿色低碳循环生产，需要加强跨界联合，集中优势力量，突破…...

编程日记 2023/3/15 4:19:43

Java之深度优先(DFS)和广度优先(BFS)及相关题目

目录一.深度优先遍历和广度优先遍历 1.深度优先遍历 2.广度优先遍历二.图像渲染 1.题目描述 2.问题分析 3代码实现 1.广度优先遍历 2.深度优先遍历三.岛屿的最大面积 1.题目描述 2.问题分析 3代码实现 1.广度优先遍历 2.深度优先遍历四.岛屿的周长 1.题目描…...

编程日记 2023/3/15 4:14:40

【链表OJ题(四)】反转链表

📝个人主页：Sherry的成长之路 🏠学习社区：Sherry的成长之路（个人社区） 📖专栏链接：数据结构 🎯长路漫漫浩浩，万事皆有期待文章目录链表OJ题(四)1. 反转…...

编程日记 2023/3/15 4:09:36

java ArrayList源码分析（深度讲解）

ArrayList类的底层实现ArrayList类的断点调试空参构造的分步骤演示（重要）带参构造的分步骤演示一、前言大家好，本篇博文是对单列集合List的实现类ArrayList的内容补充。之前在List集合的万字详解篇，我们只是拿ArrayList演示了List…...

编程日记 2023/3/15 4:04:32

【网络编程】零基础到精通——NIO基础三大组件和ByteBuffer

一. NIO 基础 non-blocking io 非阻塞 IO 1. 三大组件 1.1 Channel & Buffer channel 有一点类似于 stream，它就是读写数据的双向通道，可以从 channel 将数据读入 buffer，也可以将 buffer 的数据写入 channel，而之前的 st…...

编程日记 2023/3/15 3:59:30

杭州建德网站建设/万物识别扫一扫

在前几次的Server2008实验里面，我们向服务器FS01、FS02分别添加了一个磁盘分区E盘。但是没有介绍我们是如何通过VMWare Workstation来实现的。今天就让我们来一起利用VMWare Workstation来向虚拟主机添加一块新的硬盘并启用。利用虚拟机做实验，添加硬件&…...

编程日记 2025/1/15 21:59:58

网站建设实训报告心得体会/社群营销

MySQL - 扩展性 1 概述：人多力量未必大我们应该接触过或者听说过数据库的性能瓶颈问题。对于一个单机应用而言，提升数据库性能的最快路径就是氪金 - 买更高性能的数据库服务器，只要钱到位，性能不是问题。但是当系统性能增加到一定…...

编程日记 2025/1/15 13:40:48

网站建站的标准/重庆seo网页优化

1、Base64编码介绍Base64不能称为加解密算法，Base64编码可以把二进制数据转换为可打印的ASCII字符，常用于email消息中的二进制数据编码和HTTP协议中的basic认证。Base64编码之后的ASCII字符串包括64个可打印字符，如下：26个大写字母…...

编程日记 2025/1/15 13:04:35

龙岩网站建设哪里比较好/手机怎么建自己的网站

1 java socket的两个timeout 一个是connect timeout，即建立连接的timeout，另外一个是so timeout，是读取数据的timeout。这两个timeout都是因为客户端等不及了。 2 connect timeout 客户端想要和服务器端建立tcp连接，如果连接迟迟没…...

编程日记 2025/1/15 11:05:08

国外设计最漂亮的网站/深圳广告公司

使用 bootstrap 框架制作的创意和现代应用程序登陆页面模板，它是具有创意设计的单页 html 模板，您可以在此模板中展示您的任何应用，Applook 在所有现代浏览器，平板电脑和手机上看起来都很完美，您可以根据需要自定义每个…...

编程日记 2025/1/15 10:23:59

wordpress优秀站点/seo报价单

终端输入: pip install githttps://www.github.com/keras-team/keras-contrib.git...

编程日记 2025/1/15 8:48:46

🚩1.1 层叠性

🚩1.2 继承性

🚩1.3 优先性

相关文章：