CSS三大特性继承性、层叠性和优先级详解


Posted in HTML / CSS onJanuary 18, 2022

1.css属性的继承

CSS中有些属性是可继承的,何为属性的继承?

  • 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值。当然,一个元素如果有设置自己的属性值,就会使用自己的。
  • 比如color、font-size等属性是可以继承的,怎样查看某些属性是继承父元素的,还是自己设置的呢?(可通过浏览器调试工具查看)

示例代码如下:给父级div设置字体样式;

.box {
  color: red;
  font-size: 16px;
}
<div class="box">
  <span>我是span元素</span>
</div>

浏览器运行结果:span元素内容字体颜色变成红色、大小变成16px,并且标识样式是继承于div.box

CSS三大特性继承性、层叠性和优先级详解

  • 那么哪些样式可以继承哪些样式不能继承,具体属性是否能继承,可以查阅W3C官网或者MDN

以MDN为例:输入需要查找的属性(color是可以继承的、width是不能继承的)

CSS三大特性继承性、层叠性和优先级详解

CSS三大特性继承性、层叠性和优先级详解

  • 不能继承的属性可以使用inherit属性值强制继承。

注意:css属性继承的是计算值,并不是编写属性时的指定值(也就是字面值)。

示例代码:

.box1 {
  width: 1000px;
  height: 150px;
  background-color: #f00;
}
.box2 {
  width: 50%; /* 500px */
  height: 100px;
  background-color: #00f;
}
.box3 {
  width: inherit; /* 500px */
  height: 50px;
  background-color: #0f0;
}

<div class="box1">
  <div class="box2">
    <div class="box3"></div>
  </div>
</div>

运行结果:div.box3是直接继承div.box2计算后的500px

CSS三大特性继承性、层叠性和优先级详解

2.css属性的层叠

CSS全称 (Cascading Style Sheets,层叠样式表),它允许多个相同名字的css属性层叠在同一个元素上,层叠最后结果,只有一个css属性会生效。

  • 浏览器的调试工具非常清晰的显示哪个css属性最终生效。

示例代码:

#box { color: red; }
.container { color: green; }
div { color: blue; }

<div id="box" class="container">div元素内容</div>

浏览器运行结果:最终id设置的属性生效;

CSS三大特性继承性、层叠性和优先级详解

  • 具体哪个css属性生效,涉及到css属性所处环境的优先级的高低。

3.css属性的优先级

为什么有时编写的css属性没有产生对应效果,很可能是因为以下原因:

  • 选择器的优先级太低;
  • 选择器没有选中对应的元素;
  • css属性使用不正确;
    • 元素不支持该css属性,比如span默认不支持width和height;
    • 浏览器版本不兼容;
    • 被同类css属性覆盖,比如font覆盖font-size;

(1)解决方案:可以充分利用浏览器的调试工具进行调试和查错,也可借助css选择器的权重值来解决。

(2)为了方便css属性的优先级,可以给css属性所处的环境定义一个权值(权重)

  • !important:10000;
  • 内联样式:1000;
  • id选择器:100;
  • 类选择器、属性选择器、伪类:10;
  • 元素选择器、伪元素:1;
  • 通配符:0;

(3)比较优先级的严谨方法:

  • 从权值最大的开始比较每一种权值的数量多少,数量多的则优先级高;
  • 如果数量相同,比较下一个较小的权值,以此类推;
  • 如果所有权值比较完毕后都发现数量相同,就采取“就近原则”;

(4)也可使用下面的表格来衡量优先级高低,使用一个四位的字串表示,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越:

选择器 选择器权重
继承、* 0, 0, 0, 0
元素选择器 0, 0, 0, 1
类选择器、伪类选择器 0, 0, 1, 0
id选择器 0, 1, 0, 0
内联样式 1, 0, 0, 0
!important ∞(无穷大)

到此这篇关于CSS三大特性继承性、层叠性和优先级详解的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

 
HTML / CSS 相关文章推荐
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
使用CSS设置滚动条样式
在CSS中使用when/else的方法
Jan 18 #HTML / CSS
CSS使用伪类控制边框长度的方法
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
You might like
谈谈PHP语法(4)
2006/10/09 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
django中的图片验证码功能
2019/09/18 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
优秀大学生的自我评价
2014/01/16 职场文书
社区学习十八大感想
2014/01/22 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
财务工作个人总结
2015/02/27 职场文书
债务追讨律师函
2015/06/24 职场文书
如何利用python实现Simhash算法
2022/06/28 Python