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

CSS教程(三)- CSS 三大特性

1. 层叠性

  • 介绍

    • 多组CSS样式共同作用于一个元素,就会出现 覆盖(层叠) 另一个冲突的样式。
  • 层叠原则

    • 样式冲突:遵循就近原则(哪个样式离结构近,就执行哪个样式)

    • 样式不冲突,就不会重叠

      在这里插入图片描述

  • 示例
    在这里插入图片描述

2. 继承性

  • 后代元素可以继承祖先元素中的某些样式(子承父业),如文本颜色和字号。

    • 例 : 大部分的文本属性都可以被继承
  • 说明

    • 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
    • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
  • 拓展

    • 行高的继承

      • 如果子元素没有设置行高,则会继承父元素的行高为 1.5,此时子元素的行高是:当前子元素的文字大小 * 1.5

      在这里插入图片描述

  • 示例
    在这里插入图片描述

3. 优先级

  • 优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色),在不同地方多次进行设置,最终选用哪一种样式?此时哪一种样式表的优先级高选用哪一种。

    • 行内样式的优先级最高。
    • 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
    • 浏览器默认样式和继承样式优先级较低

  • 总结

    • 页面中的所有样式将按照以下规则 “层叠” 为新的 “虚拟” 样式表,其中第一优先级最高:

      1. 行内样式(在 HTML 元素中)
      2. 外部和内部样式表(在 head 部分)
      3. 浏览器默认样式
    • 行内样式具有最高优先级,并且将覆盖外部和内部样式以及浏览器默认样式。

4. 选择器的优先级

  • 使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

    选择器权重
    继承 或 *0
    标签选择器1
    (伪)类选择器10
    id选择器100
    行内样式1000
  • 复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和

  • 群组选择器权重以每个选择器单独的权重为准,不进行相加计算


  • 示例
    在这里插入图片描述

相关文章:

CSS教程(三)- CSS 三大特性

1. 层叠性 介绍 多组CSS样式共同作用于一个元素,就会出现 覆盖(层叠) 另一个冲突的样式。 层叠原则 样式冲突:遵循就近原则(哪个样式离结构近,就执行哪个样式) 样式不冲突,就不会重…...

如何保证Redis与MySQL双写一致性

什么是双写一致性问题? 双写一致性主要指在一个数据同时存在于缓存(如Redis)和持久化存储(如MySQL)的情况下,任何一方的数据更新都必须确保另一方数据的同步更新,以保持双方数据的一致状态。这一…...

【IC每日一题:IC验证面试--UVM验证-2】

IC每日一题:IC验证面试--UVM验证-2 2.9 get_next_iterm()和try_next_item()的区别?2.10 一个典型的UVM验证平台,谈一下UVM验证环境结构,各个组件之间的关系?2.11 uvm组件之间通信的方式? analysis_port和其…...

SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记

这是一篇港科大学生在google research 实习期间发在ECCV2024的语义引导生成式修复的文章,港科大陈启峰也挂了名字。从首页图看效果确实很惊艳,尤其是第三行能用文本调控修复结果牌上的字。不过看起来更倾向于生成,对原图内容并不是很复原&…...

#揭秘万维网:从静态页面到智能互联网

揭秘万维网:从静态页面到智能互联网 今天刚上了学校开设的课程,于是便有了下文的思考内容。 在当今数字化时代,Web(万维网)扮演着重要的角色,成为人们获取信息、沟通交流和进行商业活动的主要平台。 1. …...

【计算机基础——数据结构——红黑树】

1. 红黑树&#xff08;RBTree&#xff09; 为什么HashMap不直接使用AVL树&#xff0c;而是选择了红黑树呢&#xff1f; 由于AVL树必须保证左右子树平衡&#xff0c;Max(最大树高-最小树高) < 1&#xff0c;所以在插入的时候很容易出现不平衡的情况&#xff0c;一旦这样&…...

Sentinel — 微服务保护

微服务架构将大型应用程序拆分为多个小而独立的服务&#xff0c;每个服务可以独立部署和扩展。然而&#xff0c;微服务系统需要面对的挑战也随之增加&#xff0c;例如服务之间的依赖、分布式环境下的故障传播和安全问题。因此&#xff0c;微服务保护措施是确保系统在高并发、资…...

Cynet:全方位一体化安全防护工具

前言 1999年&#xff0c;布鲁斯施奈尔曾说过&#xff1a;“复杂性是安全最大的敌人。”彼时还是19年前&#xff0c;而现在&#xff0c;网络安全已然变得更加繁杂。 近日我在网上冲浪过程中发现了这么一个平台性质的软件&#xff0c;看似具有相当强的防护能力。 根据Cynet的描…...

python中常见的8种数据结构之一数组的应用

在Python中&#xff0c;数组是一种常见的数据结构&#xff0c;用于存储一系列相同类型的元素。在实际应用中&#xff0c;数组可以用于解决各种问题。 以下是数组在Python中的一些常见应用&#xff1a; 1. 存储和访问数据&#xff1a;数组可以用于存储和访问一组数据。可以通过…...

安装多个低版本谷歌Chrome浏览器用于测试,适配Vue3+vite项目

安装多个低版本谷歌Chrome浏览器用于测试&#xff0c;适配Vue3vite项目 问题&#xff1a;使用vue3tsvite搭建了一个项目&#xff0c;在chrome新版本浏览器上无问题&#xff0c;但是部署到现场页面直接空白&#xff0c;且控制台报错&#xff1a; Uncaugnt SyntaxError: Unexpe…...

UI组件---如何设置el-pagination分页组件的背景色

1. 要替换 el-pagination 组件的背景色&#xff0c;您可以通过自定义CSS来实现。 具体的CSS规则取决于您想要更改的是哪个部分的背景色&#xff0c;例如普通页码、活跃页码、上下导航箭头等。以下是一些示例CSS规则&#xff0c;您可以根据自己的需求进行调整&#xff1a; /* …...

LabVIEW编程过程中为什么会出现bug?

在LabVIEW编程过程中&#xff0c;Bug的产生往往源自多方面原因。以下从具体的案例角度分析一些常见的Bug成因和调试方法&#xff0c;以便更好地理解和预防这些问题。 ​ 1. 数据流错误 案例&#xff1a;在一个LabVIEW程序中&#xff0c;多个计算节点依赖相同的输入数据&#…...

论文阅读《Structure-from-Motion Revisited》

摘要 增量式地运动结构恢复是从无序图像集合中进行三维重建的一个普遍策略。虽然增量式地重建系统在各个方面上都取得了巨大的进步&#xff0c;但鲁棒性、准确性、完整度和尺度仍然是构建真正通用管道的关键问题。我们提出了一种新的运动结构恢复技术&#xff0c;它改进了目前…...

RK android14 第三方app获取su权限

需要修改的地方如下 frameworks/base/core/jni/com_android_internal_os_Zygote.cpp kernel-6.1/security/commoncap.c system/core/init/selinux.cpp system/core/libcutils/fs_config.cpp system/extras/su/su.cpp device/rockchip/common/BoardConfig.mk device/rockchip…...

线程与进程的区别(面试)

一.进程 进程&#xff1a;一个程序启动起来&#xff0c;就会对应一个进程&#xff0c;进程就是系统分配资源的基本单位。 上面一部分进程是我们自己去执行应用的可执行文件, 而另一部分是操作系统自动启动的进程. 二.线程 线程&#xff1a;线程是进程中的一个执行单元&#xff…...

OpenDroneMap Webodm

OpenDroneMap & Webodm OpenDroneMap Webodm 开源无人机航拍系列图像及其它系列图像三维重建软件。很棒的开源无人机测绘软件OpenDroneMap,从航拍图像生成精确的地图、高程模型、3D 模型和点云。 应用领域 Mapping & Surveying 测绘和测量 从图像测量获得高精度的可…...

Could not create task ‘:shared_preferences_android:generateDebugUnitTestConfig‘

flutter项目使用shared_preferences库的时候&#xff0c;打开flutter项目中的android项目运行&#xff0c;会出现如下错误信息&#xff1a; A build operation failed. Could not create task :shared_preferences_android:generateDebugUnitTestConfig. Could not create…...

CSS教程(四)- 字体

1、尺寸单位 px 像素单位% 百分比&#xff0c;参照父元素对应属性的值进行计算em 字体尺寸单位&#xff0c;参照父元素的字体大小计算&#xff0c;1em16pxrem字体尺寸单位,参照根元素的字体大小计算&#xff0c;1rem16px 2、字体属性 介绍 CSS Fonts (字体)属性用于定义字体…...

深入理解Java中的Lambda表达式

在Java 8中&#xff0c;Lambda表达式的引入无疑是一个重大的里程碑。 Lambda表达式以其简洁的语法和强大的功能&#xff0c;极大地改变了Java开发者编写代码的方式。本文将深入探讨Lambda表达式的概念、语法、使用场景以及其在函数式编程中的意义。 一、Lambda表达式的基本概…...

C#里怎么样判断一个数是偶数还是奇数

一般是采用取余的做法。 程序如下&#xff1a; /** C# Program to Check whether the Entered Number is Even or Odd*/ using System; using System.Collections.Generic; using System.Linq; using System.Text;namespace check1 {class Program{static void Main(string[]…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...