css优先级规则如何理解？一文快速读懂css优先级
发布时间：2022-04-20 09:32:36 所属栏目：语言 来源：互联网
导读：css是一种比较简单容易上手的描述语言，虽然编写css代码定义网页样式比较容易，但是很多人在写CSS过程总会遇到多种问题，例如css不生效，css效果不符合预期等等。这主要原因就是对css优先级不理解。那么什么是css优先级？css优先级规则是什么？ css优先级是c
|
css是一种比较简单容易上手的描述语言，虽然编写css代码定义网页样式比较容易，但是很多人在写CSS过程总会遇到多种问题，例如css不生效，css效果不符合预期等等。这主要原因就是对css优先级不理解。那么什么是css优先级？css优先级规则是什么？ css优先级是css中最难理解的概念之一，但对于掌握css来说非常重要。理解css优先级，不仅有利于快速解决样式问题，而且能在布局层面，帮助我们写出更明晰，更合理的css代码。 什么是css优先级 css的组成单元是样式规则（CSS Rule），单条样式规则的形式如下： 其中，选择符（Selector）决定了后边所写的属性定义会作用到哪些元素，因此称为选择符。 css有一个核心特性，当多条样式规则中的同一个属性（比如padding）作用到了同一个元素，这些样式之间就会发生覆盖： 注意，前端调试工具显示的，”被划掉“的css样式，并不是说一定是完全覆盖。css中的一些组合属性（比如margin，可以拆分为margin-top、margin-right、margin-bottom、margin-left），在这种样式覆盖中遵循的是局部覆盖的原则，即使在前端调试工具中它们看起来“整个都被划掉了”： css优先级的影响因素 css优先级的影响因素要考虑三部分内容，css选择符权重、!important标识符、属性继承。很多文章都阐述过css选择符权重这一点，但后面两部分却很少被提及。本文会依照这三部分做详细的说明。 而且，继承样式是最低优先级这一点，是无视继承样式所在的样式规则的内容的。这就是说，继承样式所在的样式规则，即使其选择符的权重比元素本身样式的选择符的权重更高（本文后文会介绍选择符权重~ :) ），甚至继承样式被写了!important，继承样式会被元素本身样式覆盖这一点仍然成立。 （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号