黑豹程序员-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>
相关推荐
Hilaku几秒前
用了三年 Vue,我终于理解为什么“组件设计”才是重灾区
前端·javascript·vue.js
HuYi_code1 分钟前
制作一个多层表头的实现
前端·vue.js
长弓三石1 分钟前
鸿蒙网络编程系列53-仓颉版TCP连接超时分析示例
前端·harmonyos
ShareJasmine2 分钟前
Vue将后端数据转成树形结构的方法
前端·vue.js
日升2 分钟前
AI 组件库-MateChat 高级玩法:多会话(四)
前端·ai编程·trae
快起来别睡了2 分钟前
# CSS 动画:从零到爆火,掌握现代网页动效的终极指南
前端·css·设计
北京_宏哥4 分钟前
🔥《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20- 操作鼠标拖拽 - 上篇(详细教程) 草稿
java·前端·前端框架
Cache技术分享10 分钟前
104. Java 继承 - 实例方法的覆盖
前端·后端
Lanqing_076018 分钟前
京东开放平台获取京东商品详情API接口操作解答
java·前端·python·api·电商·电商数据
三翼鸟数字化技术团队20 分钟前
提升开发思维的设计模式(上)
前端·javascript·设计模式