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

CSS的三大特性

🌟所属专栏:前端只因变凤凰之路
🐔作者简介: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的三大特性

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

Linux-scheduler之负载均衡(二)

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

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

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

Kafka 监控

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

MultipartFile与File的互转

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

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

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

接口测试要测试什么?

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

2023.03.12学习总结

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

数据结构入门6-1(图)

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

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

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

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

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

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

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

CSS弹性布局flex属性整理

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

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

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

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

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

中职网络空间安全windows渗透

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

普通二叉树的操作

普通二叉树的操作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 在一棵二叉树中查找…...

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

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

MongoDB数据库性能监控详解

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

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

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

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

Opencv中的addweighted函数

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

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

鱼香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…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...