CSS系列 (03):CSS三大特性
2024-08-26 06:39:20
层叠性
层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式。
继承性
继承性指的是子孙元素可以继承父元素的属性。
记录一下开发中常用的继承属性:
字体系列
font
、font-style
、font-weight
、font-size
、font-family
文本系列
text-align
、text-indent
、line-height
、color
、、
、、
、元素可见性
visibility
光标属性
cursor
优先级
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准,specificity用一个四位数来表示,更像四级从左到右,左的最大级,一级大于一级,数位之间没有进制,多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级。
贡献值
贡献值 | 权重 |
---|---|
!important | ∞ 无穷大 |
内联样式 | 1,0,0,0 |
ID选择器 | 0,1,0,0 |
类选择器,伪类选择器,属性选择器 | 0,0,1,0 |
标签选择器,伪元素选择器 | 0,0,0,1 |
通配符选择器 | 0,0,0,0 |
优先级总结:
!important > 内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器
注意:
权重的进制并不是十进制,可以理解为其不会向前进一位,100个类选择器的优先级也小于1个ID选择器 即: 0,0,9,0 < 0,1,00
栗子
#nav p
: 0,1,0,1
.nav ul li
: 0,0,1,2
a:hover
: 0,0,1,1
div ul li::after
: 0,0,0,4
!important
!important
规则是一个bug级别的存在,优先级是无穷大。
一般来说,不要频繁使用!important
规则,这是一个坏习惯,除非被逼无奈【老代码中写了很差劲的内联样式或者引用的JavaScript框架中使用了内联样式...】
参考文档
最新文章
- LR破解版录制手机脚本(一)模拟器录制
- hotCity 小程序城市选择器, 城市数据库可自己导出
- Eclipse+maven创建webapp项目<;二>;(转)
- Tomcat性能调优方案
- realmswift的使用
- Android_bug之 task &#39;:app:mergeDebugResources&#39;. >; Some file crunching failed, see logs f
- 基于Delphi的三层数据库系统的实现方法
- log4j.properties详解与例子
- dedecms 按照栏目指定的id排序
- 常见MFC UI界面库
- 关于C#匿名方法
- phpwind伪静态规则(IIS,Nginx,Apache)的介绍及代码
- java中的内存溢出和内存泄漏
- Ansible 插件 操作介绍
- fcntl设置FD_CLOEXEC标志作用【转】
- samba及其基本应用
- elasticSearch 2.3 delete-by-query plugin
- Python之json使用
- 自学Aruba之添加黑名单Blacklists方法
- xdoj-1243 (费马平方和问题)
热门文章
- 7-1 Hashing
- DBeaver连接达梦|虚谷|人大金仓等国产数据库
- 老猿学5G:融合计费场景的离线计费会话的Nchf_OfflineOnlyCharging_Create创建操作
- PyQt(Python+Qt)学习随笔:QTableWidget的获取指定位置项的item和itemAt方法
- PyQt(Python+Qt)学习随笔:Qt Designer中spacer部件的sizeHint属性
- 从Excel获取整列内容进行批量扫描
- vue通过事件向父级组件发送消息(官网点击放大例子)
- 落谷P3041 [USACO12JAN]Video Game G
- react中对内容点击复制
- 【Electron Playground 系列】窗口篇