CSS的三大特性
继承性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="utf-8"> < title >HTML5+CSS3</ title > < style > * { margin:0; padding:0; font-family: "Microsoft YaHei"; } div { color:red; font-size:30px; background:skyblue; text-decoration: none; } </ style > </ head > < body > <!-- 1:什么是继承性?给父元素设置一些属性,子元素也可以使用 注意点: 1:并不是所有的属性都可以继承,只有以color/font-/text-/line开头的才可以继承 2:在CSS的继承中不仅仅是儿子可以继承,只要是后代都可以继承 3:CSS继承性中的特殊性: a标签的文字颜色和下划线是不能继承的 h标签的文字大小是不能继承的 --> < div > < p >CSS的继承性(继承DIV属性,但不继承background属性)</ p > </ div > < div > < ul > < li > < p >这是一个段落(继承DIV属性,但不继承background属性)</ p > </ li > </ ul > </ div > < div > < a href="#">这是一个超链接(不继承DIV属性)</ a > </ div > < div > < h1 >这是一个标题(不继承DIV文字大小的属性)</ h1 > </ div > </ body > </ html > |
层叠性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="utf-8"> < title >HTML5+CSS3</ title > < style > * { margin:0; padding:0; font-family: "Microsoft YaHei"; } p { color:red; } .para { color:blue; } </ style > </ head > < body > <!-- 1:什么是层叠性?层叠性就是CSS处理冲突的一种能力 注意点: 层叠性只有在多个选择器选中“同一标签”,然后又设置了“相同的属性”,才会发生层叠性 CSS全称:Cascading StyleSheet --> < p id="identity" class="para">这是段落</ p > </ body > </ html > |
优先级
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="utf-8"> < title >HTML5+CSS3</ title > < style > * { margin:0; padding:0; font-family: "Microsoft YaHei"; } /* ul { color:red; } li { color:blue; }*/ </ style > </ head > < body > <!-- 1:什么是优先级?当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定 2:优先级判断的三种方式 2.1 是否是直接选中(间接选中就是指继承);如果是间接选中,那么就是谁离目标近就继承谁 2.2 是否是相同的选择器,如果都是直接选中并且都是同类型的选择器,那么就是谁写在后面就听谁的 2.3 不同选择器:如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠 id > 类 > 标签 > 通配符 > 继承 > 浏览器默认 --> < ul > < li > < p id="identity" class="para">这是段落</ p > </ li > </ ul > </ body > </ html > |
!important
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="utf-8"> < title >HTML5+CSS3</ title > < style > * { margin:0; padding:0; font-family: "Microsoft YaHei"; } #identity { color:purple; } p { color:green !important; } </ style > </ head > < body > <!-- 1:什么是important 作用:用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高 注意点: 1:important只能用于直接选中,不能用于间接选中 2:通配符选择器选中的标签也是直接选中的 3:!important只能提升被指定的属性的优先级,其它的属性的优先级不会被提升 4:!important必须要写到分号的前面且感叹号不能省略 --> < ul > < li > < p id="identity" class="para">这是段落</ p > </ li > </ ul > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 我干了两个月的大项目,开源了!
· 推荐一款非常好用的在线 SSH 管理工具
· 千万级的大表,如何做性能调优?
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· .NET周刊【1月第1期 2025-01-05】