CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。

一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。

  1. 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。

  2. 样式不冲突,不会层叠

CSS继承性

所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

简单的理解就是: 子承父业。

注意
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)

CSS优先级

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。

在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:

继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

CSS特殊性(Specificity):

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:

specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

每个元素(标签)贡献值为: 0,0,0,1
每个类,伪类贡献值为: 0,0,1,0
每个ID贡献值为: 0,1,0,0
每个行内样式贡献值: 1,0,0,0
每个!important贡献值: ∞ 无穷大

权重是可以叠加的

比如的例子:

div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   #nav p       ----->       0,1,0,1

注意:

  1. 数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。

  2. 继承的 权重是 0

总结优先级:

  • 使用了 !important声明的规则。
  • 内嵌在 HTML 元素的 style属性里面的声明。
  • 使用了 ID 选择器的规则。
  • 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  • 使用了元素选择器的规则。
  • 只包含一个通用选择器的规则。
  • 同一类选择器则遵循就近原则。

CSS 三大特性(层叠性,继承性,优先级)相关推荐

  1. web前端学习128-134(CSS三大特性---层叠性,继承性,优先级)

    文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级 1 CSS的三大特性 CSS有三个非常重要的三个特性︰层叠性.继承性.优先级. 1.1 层叠性 相同选择器给设置相同的样 ...

  2. CSS基础(part4)--CSS的层叠性继承性优先级

    学习笔记,仅供参考,有错必纠 参考自:CSS中文文档 文章目录 CSS CSS层叠性 CSS继承性 CSS的优先级(特殊性) 复合选择器的优先级 关于优先级权重的注意事项 CSS CSS层叠性 所谓层 ...

  3. day 9/16 css三大特性和盒子模型

    CSS 三大特性 层叠性 继承性 特殊性 CSS层叠性 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...

  4. CSS / 三大特性+盒子模型+PS基础

    目录 CSS的三大特性 层叠性 继承性 优先级 盒子模型 边框 border 内边距 padding 外边距 margin PS测量 CSS的三大特性 层叠性 后来居上,相同选择器设置相同样式时,一个 ...

  5. CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用

    一.复合选择器 1.后代选择器 根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...

  6. 【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】

    emmet语法 快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置 搜索框输入"格式化",勾选上如图三个选项 ...

  7. CSS中的层叠性、继承性、优先级、权重

    css三大特性: 三大特性:层叠性.继承性.优先级 层叠性: 指多种css样式的叠加,是浏览器处理多种css样式冲突的能力,如果给一个元素通过不同或者相同的选择器设置相同的属性但属性值不同时,权重相同 ...

  8. 前端笔记(4)css,复合选择器,标签的显示模式,行高,css背景,css三大特性

    css样式表/层叠样式表(2) (1)css复合选择器 后代选择器 子元素选择器 交集选择器(不常用) 并集选择器 链接伪类选择器 (2)标签的显示模式 块级元素block-level 行内元素inl ...

  9. css --- [学习笔记]背景图片小结 css三大特性

    源代码 参考 1. 行高(line-height) 目标 理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居 应用 使用行高实现单行文字垂直居中 能会测量行高 2. CS ...

  10. 七、CSS 三大特性(完整详细解析)

    ** CSS 三大特性(完整详细解析) ** 1.优先级: 定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时, 选择器相同,则执行层叠性 选择器不同,就会出现优先级的问题. 1)权重计算 ...

最新文章

  1. RN Exception: Before building your project, you need to accept the license agreements and comp le...
  2. c++字符串拼接_Python零基础入门(三):字符串进阶
  3. 缺陷分析与软件质量的关系
  4. Mysql表结构升级_mysql表结构升级时根据字段是否存在执行相应操作
  5. jQuery的位置信息和事件
  6. 默纳克系统服务器怎么看抱闸,默纳克抱闸制动力检测怎么关闭
  7. android实现截图功能吗,Android实现拍照截图功能
  8. PartyUs 待添加内容(不定期更新)
  9. 调查 1621 万互联网人:发现技术人基本是男性,还一半都单身
  10. php 小数 精度不准,php小数精度问题
  11. 只因写了一段爬虫,公司200多人被抓!
  12. 基于PHP的学生在线考试管理系统
  13. 滴答(DiDa)-客户端体验版上线了
  14. 51单片机+L298N控制步进电机【T型】加减速
  15. ★【STL】报表统计
  16. 从事游戏开发需要什么技能
  17. socket编程(在线自动聊天工具) --Python3
  18. 基本函数画图软件(直接下载,一元二次方程图像,幂函数图像,指数图像,三角函数图像,反三角函数图像)
  19. python 电压 谐波_教你计算总谐波失真(THD)
  20. 球面经纬度坐标转换为空间直角坐标

热门文章

  1. 菜谱项目(个人中心、类别模块、菜谱发布)
  2. cp -r/R 源目录 目标目录
  3. 嵌入式风口已来,如何乘风而上?
  4. Unreal Engine 4 —— GAS系统学习 (二十一) 为主角添加技能图标
  5. c语言10进制转2进制字符串,C语言十进制转二进制——实现和思考
  6. 智慧景区APP开发解决方案
  7. 【python】unittest框架
  8. matlab如何删除打开记录,matlab清除命令窗口时,如何显示确认删除的对话框?
  9. Matlab中常用的几个清除命令
  10. 如何简单轻松的把360度VR全景图做成视频?