CSS基础-层叠与继承
2024-10-18 19:29:24
继承
一些属性可以被继承,一些不可以。
一般来说,字体颜色、字体大小会被继承,关于形状的如 padding 、border 、margin、width等就不会被继承。哪些属性属于默认继承很大程度上是由常识决定的。
控制继承
CSS提供了四个通用属性值来控制继承,每个CSS属性都可以接收这些值。
- inherit 继承父元素的属性值
- initial 设置属性值和浏览器默认样式相同
- unset 将属性重置为自然值,如果有inherit的话就是inherit,否则和initial一样
- revert 很少浏览器支持
重设所有属性值
all : unset initial inherit revert
撤销对所有样式所做的更改,以便回到之前已知的起点。
层叠
有时对于一些元素有多条规则,那么应该选用哪条规则应用于这些元素?
根据重要性从上到下,有三个因素需要考虑:
- 资源顺序
当两条同级别的规则应用到同一个元素上时,写在后面的规则就是实际使用的规则。
- 优先级
声明在style属性(内联样式) > ID选择器 >类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器
选择范围越小,优先级越高,因为越精确。
因此通用的做法是,给基本元素定义通用的样式,根据需求再创建不同的类。
选择器属性优先级计算:
一个选择器的优先级由四个部分相加 ,可以认为是个十百千 —— 四位数的四个位数:
- 千位: 如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器,所以它得分总是1000。
- 百位: 选择器中包含ID选择器则该位得一分。
- 十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位:选择器中包含元素、伪元素选择器则该位得一分。
注意:
1. 通用选择器(*)、组合符合(>, ~, +, ' ')和否定伪类(: not) 不会影响优先级。
2. 计算时不能进位,即20个元素选择器的叠加 也不能超过一个类选择器。
- ! important
! important 优先级最高,能够覆盖普通规则的层叠。
覆盖 ! important 的唯一办法是用另一个位置靠后或者具有更高优先级的 ! important 覆盖它。
但是我们应该尽量避免使用这个属性,因为调试起来会不方便。
最新文章
- C#3.0扩展方法学习篇
- iphone如何导出微信聊天记录到电脑?
- lunece全文检索的入门与简单优化
- php日历
- C语言extern作用(全局变量)
- MySQL优化技巧之三(索引操作和查询优化)
- Python 全栈开发 -- 开发环境篇
- HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket
- 修改oracle服务器所在linux主机名
- asp.net Form 认证【转】
- VC档(夹)文件夹路径的经营方针和代码
- on使用详解
- linux 更改用户的默认shell
- Javascript设计模式(2)-单体模式
- 使用DOS命令关闭tomcat端口(其他服务也是可以的)
- 我的Lambda的学习笔记
- maven安装与环境变量配置
- Ajax不执行回调函数的原因(转)
- Arch i3wm
- PowerShell 命令行调试指引(转)