0

0

如何使用!important来改变CSS中优先级的顺序

不言

不言

发布时间:2018-11-20 17:23:23

|

4496人浏览过

|

来源于php中文网

原创

每个样式表的优先顺序是在前面的页面上记载的,在相同的样式表中,同一元素的属性设定多个值的情况下,会发生什么呢?本篇文章就来给大家分享一下如何使用!important来改变css中优先级的顺序。

我们来看一个简单的例子。首先,创建目标HTML语句




	
	


啦啦啦啦php中文网 哒哒哒哒哒php中文网

浏览器上效果显示如下:strong元素中文字的颜色是红色。

360截图20181120165834239.jpg

接下来我们来看一下!important的使用

如果要改变代码中优先级,则需要使用!important,使用方法如下。

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

选择器{ 
  property(属性):value(值) !Important ; 
  }

在描述样式时,如果在值之后用空格再写!important,则无论正常优先级如何,都将优先应用该样式。

下面我们来看一下具体的例子,将上述代码中的CSS变成如下所示

浏览器上显示如下所示:strong元素中字体颜色变成了绿色,!important改变了样式的优先级。

ChatWP
ChatWP

一个AI聊天机器人,可以直接回答你的WordPress问题。

下载

360截图20181120170720402.jpg

我们接下来看看当样式表不同时!important的使用

样式表的优先级如下所示

(高优先级)
 样式表在HTML文档中描述
 用户样式表由用户查看
 样式表设置每个浏览器的默认样式表                                                                                                                                              (低优先级)

如果使用HTML文档中描述的样式表为同一元素的属性再次设置在用户样式表中设置的样式表,样式表形式将生效。

那么如果在用户样式表设置中添加“!Important”会发生什么?在这种情况下,带有“!Important”的样式优先。我们来具体看一下。

(高优先级)
  有!important的用户的样式表
 有!important写HTML文档中的样式表
 写在HTML文档中的样式表
  用户样式表
  默认样式表                                                                                                                                                                                   (低优先级)

需要特别注意的是“带有!important的用户样式表”比“带有!important的HTML文档描述的样式表”具有更高的优先级。因此,即使HTML文档的创建者将样式设置为“!Important”,如果在用户样式表中将新样式值表设置为“!Important”,则用户样式表也会生效。

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程,阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程,阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

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

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

218

2025.12.24

热门下载

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

精品课程

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

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