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把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python实用代码片段收集贴
2015/06/03 Python
python字符串,数值计算
2016/10/05 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
校园学雷锋活动月总结
2014/03/09 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
大学生活感想
2015/08/10 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
GPU服务器的多用户配置方法
2022/07/07 Servers