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伪类选择器:nth-child()
Apr 02 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 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
制作美丽的拉花
2021/03/03 冲泡冲煮
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
javascript 面向对象继承
2009/11/26 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Three.js基础学习教程
2017/11/16 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
浅析Python 多行匹配模式
2020/07/24 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
新员工欢迎词
2014/01/12 职场文书
访谈节目策划方案
2014/05/15 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014年大学生工作总结
2014/11/20 职场文书
教师个人师德总结
2015/02/06 职场文书
社区节水倡议书
2015/04/29 职场文书
python实现局部图像放大
2021/11/17 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技