黑豹程序员-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>
相关推荐
Jolyne_9 小时前
如何实现无感刷新Token
前端
用户4099322502129 小时前
Vue3响应式系统的底层原理与实践要点你真的懂吗?
前端·ai编程·trae
qq_479875439 小时前
RVO和移动语义
前端·算法
加菲喵9 小时前
深度解析:在vue3中使用自定义Hooks
前端
hxmmm10 小时前
js中生成器和迭代器
前端
黄交大彭于晏10 小时前
UniApp 全局通知功能实现
前端·vue.js·uni-app
sTone8737510 小时前
Android核心概念(一)minSdkVersion targetSdkVersion compileSdkVersion
android·前端
林太白10 小时前
八大数据结构
前端·后端·算法
一 乐11 小时前
流浪动物救助|流浪猫狗救助|基于Springboot+vue的流浪猫狗救助平台设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设
火星数据-Tina11 小时前
Python + WebSocket 实现实时体育比分系统(含数据库设计与前端演示)
开发语言·前端