CSS样式表优先级

CSS样式表优先级前端入门学习笔记(持续更新中)以下结论仅基于浏览器的表现,不涉及深层原理,有待深入。 行内样式VS内部样式、链接样式、导入样式 *结论:行内样式优先级最高 内部样式VS链接样式 …

大家好,又见面了,我是你们的朋友全栈君。

CSS样式表优先级

1. 以下结论仅基于浏览器的表现,不涉及深层原理,有待深入。
2. 本文的"优先级"仅为最后样式体现的描述,不与常规定义等同。
  1. 行内样式 VS 内部样式、链接样式、导入样式

    CSS样式表优先级 CSS样式表优先级 CSS样式表优先级 CSS样式表优先级 CSS样式表优先级 CSS样式表优先级

    *结论:行内样式优先级最高

  2. 内部样式 VS 链接样式

    CSS样式表优先级 CSS样式表优先级

    CSS样式表优先级 CSS样式表优先级

    *结论:就近原则——最靠近相关标签的样式优先级高

  3. 内部样式 VS 导入样式

《CSS权威指南》:
@import一定要写在除@charset外的其他任何CSS规则之前,如果置于其他位置将会被浏览器忽略,而且,在@import之后如果存在其它样式,则@import之后的分号是必须书写,不可省略的。”

CSS样式表优先级 CSS样式表优先级

*结论:内部样式比导入样式优先级高(或者说覆盖)

  这里因为导入样式的特殊性,不能进行两种样式的交换的优先级比较。当然,如果进行交换,依然以内部样式为准。

  • 4. 链接样式 VS 导入样式

    CSS样式表优先级 CSS样式表优先级 CSS样式表优先级 CSS样式表优先级

    *结论:就近原则——最靠近相关标签的样式优先级高

  • 总结论:

    1. 行内样式优先级最高;
    2. 内部样式优先级大于导入样式,而与链接样式的优先级则与文档顺序有关,越靠近相关标签的样式优先级越高,即遵循就近原则。
    3. 导入样式与链接样式的优先级也遵循就近原则。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158973.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月14日 下午6:00
下一篇 2022年7月14日 下午6:00


相关推荐

  • 淘宝自动发货怎么设置?新手也能秒懂!

    淘宝自动发货怎么设置?新手也能秒懂!

    2026年3月15日
    14
  • 启动了韩剧_startactivity

    启动了韩剧_startactivity一般来说当我们从launcher中启动一个应用进入到ActivityA中,系统会为这个应用生成一个新任务堆栈并置于前台,ActivityA被放入栈底,之后从ActivityA启动另一个ActivityB,如果不设置什么附加属性,ActivityB默认也放到和ActivityA这个堆栈中,这样当你按返回时,B出栈,A呈现出来了,这个应该很好理解。那现在假如ActivityA启动一个Service…

    2022年10月5日
    5
  • KVM虚拟化

    KVM虚拟化kvm 虚拟化 1 虚拟化介绍 2 kvm 介绍 3 kvm 部署 3 1kvm 安装 3 2kvmweb 管理界面安装 1 虚拟化介绍虚拟化是云计算的基础 简单的说 虚拟化使得在一台物理的服务器上可以跑多台虚拟机 虚拟机共享物理机的 CPU 内存 IO 硬件资源 但逻辑上虚拟机之间是相互隔离的 物理机我们一般称为宿主机 Host 宿主机上面的虚拟机称为客户机 Guest 那么 Host 是如

    2026年3月18日
    2
  • springboot线程池的使用和扩展「建议收藏」

    springboot线程池的使用和扩展「建议收藏」我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行,今天我们就来实战体验这个线程池服务;本文地址:http://blog.csdn.net/boling_cavalry/article/details/79120268实战环境windowns10;jdk1.8;spring

    2022年6月30日
    23
  • scala之object类

    scala之object类目录 1 object 是什么 2 scala 中 object 对象的应用 1 作为伴生对象 object2 继承抽象类 重写抽象类中的方法 3 object 定义特殊的 apply 方法 4 object 实现 scala 中的 main 方法 5 object 实现枚举值 1 object 是什么含义 相当于 clas

    2026年3月16日
    2
  • flag_activity_new_task 简单_android startactivityforresult

    flag_activity_new_task 简单_android startactivityforresult2019独角兽企业重金招聘Python工程师标准>>>…

    2026年4月15日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号