8.CSS层叠继承规则总结

CSS 层叠继承规则总结

经典真题

  • 请简述一下 CSS 中的层叠规则

CSS 中的层叠继承规则

在前面《CSS属性的计算过程》中,我们介绍了每一个元素都有都有所有的属性,每一个属性都会通过一系列的计算过程得到最终的值。

这里来回顾一下计算过程,大致有以下几个步骤:

  • 确定声明值
  • 层叠冲突
  • 使用继承
  • 使用默认值

其中的第二步和第三步层叠和继承会有一些需要注意的知识点,这里我们一起来看一下。

层叠规则

CSSCascading Style Sheets 的缩写,这暗示层叠(cascade)的概念是很重要的。

在最基本的层面上,它表明 CSS 规则的顺序很重要,但它比那更复杂。

什么选择器在层叠中胜出取决于三个因素(这些都是按重量级顺序排列的,前面的的一种会否决后一种):

  • 重要性(Importance
  • 专用性(Specificity
  • 源代码次序(Source order

重要性

CSS 中,有一个特别的语法可以让一条规则总是优先于其他规则: !important

知道 !important 存在是很有用的,这样当你在别人的代码中遇到它时,你就知道它是什么了。

但是!建议你千万不要使用它,除非你绝对必须使用它。您可能不得不使用它的一种情况是,当您在修改某个组件样式时,你不能编辑该组件核心的 CSS 模块,又或者你确实想要重写一种不能以其他方式覆盖的样式。

但是,如果你能避免的话,不要使用它。由于 !important 改变了层叠正常工作的方式,因此调试 CSS 问题,尤其是在大型样式表中,会变得非常困难。

专用性

专用性基本上是衡量选择器的具体程度的一种方法,主要是指它能匹配多少元素。

元素选择器具有很低的专用性。类选择器具有更高的专用性,所以将战胜元素选择器。ID 选择器有甚至更高的专用性, 所以将战胜类选择器,战胜 ID 选择器的方法则是 style 中的样式或者 !important

一个选择器具有的专用性的量可以用四种不同的值(或组件)来衡量的,它们可以被认为是千位,百位,十位和个位,在四个列中的四个简单数字:

  • 千位:如果声明是在 style 属性中该列加 1 分(这样的声明没有选择器,所以它们的专用性总是 1000)否则为 0
  • 百位:在整个选择器中每包含一个 ID 选择器就在该列中加 1 分。
  • 十位:在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加 1 分。
  • 个位:在整个选择器中每包含一个元素选择器或伪元素就在该列中加 1 分。

注:通用选择器(*), 复合选择器(+、>、~、空格)和否定伪类(:not)在专用性中无影响。

举个例子:

选择器千位百位十位个位合计值
h100010001
#indentifier01000100
h1 + p::first-letter00030003
li > a[href*=” zh-CN”] > .inline-warning00220022
没有选择器, 规则在一个元素的 style 属性里10001000

源代码次序

如果多个相互竞争的选择器具有相同的重要性和专用性,那么第三个因素将帮助决定哪一个规则获胜,也就是说,选择哪一个选择器取决于源码顺序。

例如:

p {color: red;
}p {color: blue;
}

不过有一点大家需要注意的是,当多个 CSS 规则匹配相同的元素时,它们都被应用到该元素中。只不过后面因为层叠规则被层叠掉了而已。打开 Elements > Styles 我们就能看到:

image-20240222090719106

继承规则

所谓继承,就是应用于某个元素的一些属性值将由该元素的子元素继承,而有些则不会。

究竟哪些属性能够被子元素继承,可以参阅:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

CSS 为处理继承提供了四种特殊的通用属性值:

  • inherit:该值将应用到选定元素的属性值设置为与其父元素一样。
  • initial:该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值,并且该属性是自然继承的,那么该属性值就被设置为 inherit
  • unset:该值将属性重置为其自然值,即如果属性是自然继承的,那么它就表现得像 inherit,否则就是表现得像 initial
  • revert:如果当前的节点没有应用任何样式,则将该属性恢复到它所拥有的值。换句话说,属性值被设置成自定义样式所定义的属性(如果被设置), 否则属性值被设置成用户代理的默认样式。

注: initialunset 不被 IE 支持。

继承的就近原则

由于属性值是由继承而来,所以属性值会继承离自己近的那个元素的属性。例如:

<div class="one"><div class="two"><p>Lorem ipsum dolor sit amet.</p></div>
</div>
.two {color: blue;
}.one {color: red;
}

在上面的示例中,twoone 更加接近 p,所以最终采用的是 twocolor 值。段落呈现蓝色。

真题解答

  • 请简述一下 CSS 中的层叠规则

参考答案:

CSS 中当属性值发生冲突时,通过层叠规则来计算出最终的属性值,层叠规则可以分为 3 块:

  • 重要性(Importance):!important 设置该条属性值最重要,但是一般不推荐使用。
  • 专用性(Specificity):专用性主要是指它能匹配多少元素,匹配得越少专用性越高。
  • 源代码次序(Source order):在重要性和专用性都一致的情况下,属性值取决于源代码的先后顺序。

-EOF-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697423.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Node.js中如何处理异步编程

在Node.js中&#xff0c;处理异步编程是至关重要的技能。由于Node.js的单线程执行模型&#xff0c;异步编程可以极大地提高程序的性能和响应速度。本文将介绍几种常见的异步编程处理方式&#xff0c;并附上示例代码&#xff0c;帮助您更好地理解和应用异步编程技术。 回调函数…

家政小程序开发,引领家庭服务新时代的科技革命

随着科技的飞速发展&#xff0c;人们的生活方式正在发生深刻的变化。其中&#xff0c;家政服务作为日常生活的重要组成部分&#xff0c;也在经历着一场由小程序技术引领的科技革命。本文将探讨家政小程序的发展趋势、功能特点以及对家庭服务的深远影响。 一、家政小程序的发展…

NFTScan Labs,一个聚焦在 NFT 领域的开发者组织

NFTScan Labs 是一个聚焦在 NFT 领域的开发者组织&#xff0c;成立于 2021 年 3 月份。NFTScan Labs 核心成员从 2016 年开始涉足区块链领域&#xff0c;有多年开发经验和前沿行业认知&#xff0c;对加密钱包、区块链安全、链上数据追踪、DeFi、预言机、NFT 等领域有深入的研究…

2/22作业

1.按位置插入 void insert_pos(seq_p L,datetype value,int pos) { if(LNULL) { printf("入参为空\n"); return; } if(seq_full(L)) { printf("表已满\n"); return; } if(pos>L->len|…

Jenkins的使用GIT(4)

Jenkins的使用GIT 20211002 我们使用 Jenkins 集成外部 Git 仓库&#xff0c;实现对真实代码的拉取和构建。在这里&#xff0c;我们选用 Coding/Github/Gitee 等都可以作为我们的代码源 1 生成公钥私钥 首先&#xff0c;我们先来配置公钥和私钥。这是 Jenkins 访问 Git 私有库…

【nvm】下载安装及使用(包含windows和Linux)

目录 1、Windows版本下载及安装 2、Linux下载及安装 下载 安装 3、使用 在不借助第三方工具的情况下切换node版本&#xff0c;只能卸载现有版本&#xff0c;安装需要的版本&#xff0c;这样显然很麻烦。而nvm就很好的帮我们解决了这个问题。 nvm&#xff08;node.js vers…

QT中调用python

一.概述 1.Python功能强大&#xff0c;很多Qt或者c/c开发不方便的功能可以由Python编码开发&#xff0c;尤其是一些算法库的应用上&#xff0c;然后Qt调用Python。 2.在Qt调用Python的过程中&#xff0c;必须要安装python环境&#xff0c;并且Qt Creator中编译器与Python的版…

IDEA启动Springboot报错:无效的目标发行版:17 的解决办法

无效的目标发行版&#xff1a;17 的解决办法 一般有两个原因&#xff0c;一可能是本地没有安装JDK17&#xff0c;需要安装后然后在IDEA中选择对应版本&#xff1b;二可能是因为IDEA版本太低&#xff0c;不支持17&#xff0c;需要升级IDEA版本。然后在File->Project Struct…

未雨绸缪,才是真正的高手

由于电脑用了五年半&#xff0c;刚换了新型电脑主机&#xff0c;人老了摸索掌握新操作方法较困难&#xff0c;所以今天的网文作业只好从简&#xff0c;即本“人民体验官”推广人民日报官方微博文化产品《夜读&#xff1a;真正的高手&#xff0c;都懂得凡事提前一步》。 图&…

Flutter常用命令,持续更新

目录 前言 Flutter 常用命令 Dart 常用命令 adb 常用命令&#xff08;用于 Android 开发&#xff09; 前言 当在开发Flutter项目时&#xff0c;熟悉一些常用的命令是非常重要的。这些命令可以帮助你执行各种任务&#xff0c;从构建应用程序到调试和测试。以下是一些Flutte…

Draw.io | 强大并且免费的画图工具

前言 作为一个技术人&#xff0c;总是需要一个称手的画图工具&#xff0c;日常工作中&#xff0c;画的最多的图应该就是流程图&#xff0c;思维导图&#xff0c;如果开发时间比较久的话&#xff0c;可能还需要画架构图。刚开始的时候&#xff0c;我下载了各种工具&#xff0c;像…

Aigtek电压放大器的应用场合有哪些

电压放大器是一种主要用于信号处理的重要电子设备&#xff0c;它可以将输入的低电压信号放大到较高的输出电压水平。在各个应用领域中&#xff0c;电压放大器发挥着重要的作用。下面西安安泰点击将介绍电压放大器的应用场合。 通信系统&#xff1a;电压放大器在通信系统中具有重…

【打工日常】使用docker部署StackEdit编辑器-Markdown之利器

一、StackEdit介绍 StackEdit一款强大的在线Markdown编辑器&#xff0c;不仅具备卓越的写作功能&#xff0c;还支持实时预览、多设备同步等特性。 很多时候基于安全和信息保密的关系&#xff0c;建议放在自己的服务器或者本地linux去运行&#xff0c;这样会比较省心。 二、本次…

Nginx跳转模块location

一.location模块概述 1.定义 location块是server块的一个指令。作用&#xff1a;基于Nginx服务器接收到的请求字符串&#xff0c;虚拟主机名称&#xff08;ip&#xff0c;域名&#xff09;、url匹配&#xff0c;对特定请求进行处理。 2.三种匹配类别 精准匹配&#xff1a;l…

企业微信变更企业主体的流程

企业微信变更主体有什么作用&#xff1f;做过企业运营的小伙伴都知道&#xff0c;很多时候经常会遇到现有的企业需要注销&#xff0c;切换成新的企业进行经营的情况&#xff0c;但是原来企业申请的企业微信上面却积累了很多客户&#xff0c;肯定不能直接丢弃&#xff0c;所以这…

【Flink数据传输(一)】NetworkStack架构概述:实现tm之间的数据交换

文章目录 1. NetworkStack整体架构2. StreamTask内数据流转过程 NetworkStack提供了高效的网络I/O和反压控制 除了各个组件之间进行RPC通信之外&#xff0c;在Flink集群中TaskManager和TaskManager节点之间也会发生数据交换&#xff0c;尤其当用户提交的作业涉及Task实例运行在…

ubuntu20.04中配置Pyrep和CoppeliaSim

ubuntu20.04中配置Pyrep和CoppeliaSim 在Ubuntu20.04中配置 Pyrep &#xff0c;实现应用Python语言的机器人在 Vrep&#xff08;CoppeliaSim&#xff09;中的虚拟仿真 一、安装CoppeliaSim 4.1 1.1 下载适配Ubuntu20.04的CoppeliaSim 4.1软件 下载链接&#xff1a;https://…

5.iframe

iframe 经典真题 iframe 框架有哪些优缺点&#xff1f;iframe 用来干什么的 iframe 介绍 iframe 称之为嵌入式框架&#xff0c;嵌入式框架可以把一个完整的网页内容嵌入到现有的网页中。 下面是一个 iframe 的简单示例&#xff1a; <body><p>iframe 示例<…

ssm+springmvc基于springboot的宠物领养系统的设计与实现_j5fk4

宠物领养系统主要是为了提高管理员的工作效率&#xff0c;满足管理员对更方便、更快、更好地存储所有信息和数据检索功能的要求。通过对多个类似网站的合理分析&#xff0c;确定了宠物领养系统的各个模块。考虑到用户的可操作性&#xff0c;经过深入调查研究&#xff0c;遵循系…

力扣算法Algorithm竞赛模板库(codeforces-go):含了算法竞赛中常用的数据结构和算法实现,助力开发者更高效地解决问题

1.算法Algorithm竞赛模板库&#xff08;codeforces-go&#xff09; 算法竞赛模板库&#xff0c;为算法竞赛爱好者提供了一系列精心设计的算法模板。这个库包含了算法竞赛中常用的数据结构和算法实现&#xff0c;助力开发者更高效地解决问题 一个算法模板应当涵盖以下几点&…