CSS中理解层叠性及权重如何分配


Posted in HTML / CSS onDecember 24, 2022

CSS中理解层叠性及权重如何分配

前言

大家好,我是翼同学。今天笔记的内容是:

  • CSS的三大特性,分别是层叠性、优先性和继承性

三大特性

☀️层叠性

什么是层叠性?

在CSS中,样式的设置顺序很重要。当相同选择器设置同一样式时,往往最后设置的样式才是实际应用的样式,这就是CSS的层叠性。

为了更好的理解这个概念,先来看这样一个问题:

h3 {
color: red;
}
h3 {
color: blue;
}

上述代码运行后,color属性应呈现哪个值?

很显然,答案是蓝色。

总的来说,相同级别的选择器选择设置同一样式时,会发生样式冲突,此时只有一个规则起作用,也就是最后一条样式生效。这就是CSS层叠性

但有时我们发现,实际情况并不是这样。看下面代码:

<!DOCTYPE html>
<html>
<head>
    <style>
        .nav {
            color: red;
        }
        h3 {
            color: blue;
        }
    </style>
</head>
<body>
    <h3 class="nav">
        Hello world!
    </h3>
</body>
</html>

为什么上述代码运行后,标题呈现为红色?明明<h3>标签是在后面定义的,按照层叠性来讲,标题应该呈现出蓝色才是?

其实,这些都引出了CSS的另一大特性:优先性

✔️优先性

选择器具有权重的概念,不同权重的选择器优先级不同。当发生样式冲突时(同一元素的属性被多次设置),浏览器会根据不同选择器的权重来判断哪些样式设定有效,这就是CSS的优先性。

就前面的例子而言,标签选择器h3 { } 会选择页面中所有的<h3>标签,这并不是很具体。但是类选择器会选择页面中具有特定class属性的标签,这就稍微具体了些。所以,类选择器的权重会比标签选择器大一些,导致即使标签选择器在最后定义也无法实现特定效果。

总结:

当同一个元素被多个不同的选择器指定时,就会有优先级存在。根据选择器的权重来决定执行哪个样式。(关于权重,后面小节单独讲)

?继承性

继承性也是CSS中的一大特性。如何理解继承?

举个例子,将一个元素的color值设置为红色,如果该元素的子元素没有设置color值,那么子元素会自动继承父元素的设定值,也就是红色。

  • 总的来说,继承就是一些在父元素上的样式设置,可以被子元素继承

注意,只是一部分属性可以被继承,例如:颜色color属性。也有无法被继承的属性,比如width

小结:

  • 常见的可继承的属性color属性、font属性、text属性
  • 常见的不可继承的属性widthheightbordermarginpadding

权重

当不同选择器定义同一属性时,浏览器该选择执行哪一个?前文讲过,这种情况叫做样式冲突,当发生样式冲突时,会有优先级的指向。由于不同选择器的权重不同,使得样式冲突的解决成为可能。那么到底选择器的权重有哪些呢?

具体优先级看下表:

等级 定义 权重
!important 最大
行内样式 1, 0, 0, 0
ID选择器 0, 1, 0, 0
伪类选择器属性选择器 0, 0, 1, 0
标签选择器 0, 0, 0, 1
通配符选择器* 0, 0, 0, 0
继承 没有权重

注意事项:

  • !important是用于指定样式规则的最大优先权
  • 但注意,虽然!important权重最大,但是并不经常使用。
  • 等级一到等级六,权重依次递减,并且注意到,继承是没有权重的。
  • 不同选择器间设置同一属性,浏览器会根据选择器的权重大小来决定执行哪个样式
  • 需要注意的是,复合选择器的使用会产生权重的叠加问题

权重叠加时,如何计算叠加权重?

具体来说,就是相同位上的值互相叠加,但不会产生进位。

举个例子:

h2 p {
    color: red;
}
.nav p {
    color: green;
}

运行后,段落的颜色显示为绿色。

在上面这个例子中:

  • 后代选择器 h2 p { } 权重为0,0,0,1 + 0,0,0,1 = 0,0,0,2
  • 后代选择器.nav p { }权重为0,0,1,1 + 0,0,0,1 = 0,0,1,1
  • 可以看到,权重相加后是不会出现进位的

最后,总结如下:

权重值一共有四位数值,判断权重大小的方法是从左往右,判断位上数值的大小,如果某一位的数值相同,则判断下一位数值

到此这篇关于CSS中理解层叠性及权重如何分配的文章就介绍到这了,更多相关css层叠性权重内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 #HTML / CSS
详解CSS3浏览器兼容
Dec 24 #HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 #HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 #HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 #HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
详解CSS中postion和opacity及cursor的特性
Aug 14 #HTML / CSS
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
随机广告显示(PHP函数)
2006/10/09 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
使用python制作一个解压缩软件
2019/11/13 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
铁路个人事迹材料
2014/01/30 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
工作保证书
2015/01/17 职场文书
还款承诺书范本
2015/01/20 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书