0

0

深入理解CSS选择器的优先级顺序

yulia

yulia

发布时间:2018-09-18 15:03:31

|

2752人浏览过

|

来源于php中文网

原创

css中有很多选择器,比如类选择器,标签选择器,id选择器等等,不同选择器之间的优先级顺序也不一样,今天就和大家聊聊css选择器的优先级顺序,以及、!important的使用,有需要的朋友可以参考一下,希望对你有用。

1、!important 表示最高优先级。ie6浏览器不认识 !important 。

举例:

正常情况下,写在下面的样式优先级高于上面的样式

demo1{
color:red;
color:green; /*绿色的优先级高于红色,所有浏览器都会显示绿色*/
}

加了!important 那么它的优先级会比较高,ie6比较傻,不认识。

立即学习前端免费学习笔记(深入)”;

demo2 {
color:red !important; /*除了ie6,其他浏览器会认为红色优先级高,显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

但是注意,ie6不认识!important的优先级,但并不代表ie6不认识带!important的样式属性。

demo3{
color:red;
color:green !important; /*包括ie6,所有浏览器都显示绿色字体,ie6只是不认识优先级罢了*/
}

2、CSS (Cascading Style Sheets) 级联样式表,在实际应用中,一般有以下三种级联方式。

优先级:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

1. 外联式(应用于多个网页)

外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式。在 HTML 中的外部级联采用 标记或者 @import 语句来引入。

示例代码如下:

MotionGo
MotionGo

AI智能对话式PPT创作,输入内容一键即可完成

下载
 //link 链接
@import url("style.css"); //@import 导入

和 @import 的异同见其文章

2. 内联式(应用于当前页面)

门户网站的 CSS 代码通常采用嵌入式,即通常所说的内联方式 (Inline Style),其使用

示例代码如下:

内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

3. 嵌入式(应用于具体的标签)

最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。

示例代码如下:

饿了么

这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。

3、权值不同时,浏览器是根据权值来判断使用哪种选择器的css样式,样式权值高的就使用哪种样式。

权值规则:标签(P、span)的权值为1,类选择器的权值为10,id选择器的权值最高为100。

举例:

div {color: red;} /*标签,权值为1*/

div span {color: green;} /*两个标签,权值为1+1=2*/

div>span {color: purple;} /*权值与上面的相同,因此采取就近原则*/

.main {color: white;} /*类选择符,权值为10*/

div span.warning {color: purple;} /*权值为1+1+10=12*/

#main .con p {color: yellow;}  /*权值为100+10+1=111*/

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

34

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

14

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

33

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

18

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

12

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

44

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

5

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 18.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号