揭秘CSS(第 1 版)
1.5.4 样式表的优先级
阅读(

概述

CSS简介

CSS开发环境

CSS语法

CSS属性的值

创建样式表

创建内联样式表

创建内嵌样式表

创建外部样式表

样式表的优先级

上述 4 种应用样式的方法,各自都有其自身的特定,如果这 4 种同时应用到同一个HTML元素上时,将会出现优先级的问题,即哪个样式会生效的问题。

如果内联样式、嵌入样式、导入样式、链接样式同时应用于同一个元素时,样式表的优先级规则是高优先级样式会生效,即高优先级会覆盖低优先级样式。

样式表的优先级按内联样式、嵌入样式、导入样式、链接样式顺序依次降低,其实,也就是就近原则,距离元素越近的样式,越优先生效。如果这四种样式都没有定义,则会应用浏览器的默认样式。

如,在嵌入样式中,把段落的文本颜色定义为黑色:

<style>
p {
    color: black;
}
</style>

内联样式中,把段落的文本颜色定义为红色:

<p style="color: red">段落文本</p>

上面代码中,在内联样式和嵌入样式中同时定义了段落文本的color属性,由于内联样式的优先级高于嵌入样式,故内联样式会覆盖嵌入样式,文本会以红色显示。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验