黑豹程序员-CSS四种样式的定义方式及冲突后的就近原则

4种样式定义

  1. 浏览器缺省设置(即默认)
  2. 外部样式表(引用的css)
  3. 内部样式表(位于 标签内部)
  4. 内联样式(在 HTML 元素内部)

样式冲突如何解决?

若多重样式将层叠为一个:

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

这是使用CSS时最大的难点。实际开发中会产生不同人写的样式去修饰同一个元素的情况,此时谁的修饰生效?

内联样式(在 HTML 元素内部)拥有最高的优先权,我们也称为就近原则。

案例

外部样式表:

cpp 复制代码
<span style="font-size:18px;"><link href="style.css" rel="stylesheet" type="text/css"></span>

内部样式表:

cpp 复制代码
<span style="font-size:18px;"><style type="text/css">.classname{width:100%}</style></span>

内联样式

cpp 复制代码
<span style="font-size:18px;"><div width="80"></div></span>
相关推荐
MiyueFE5 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子9 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~37 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了39 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_41 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计