檬味博客 » 问答 » css样式中遇到！important

css样式中遇到！important

3、创建style标签，然后创建一个class类为btn用于设置按钮样式，其中按钮的背景设置background-color:#009F95!important;代码： .btn{ border:1pxsolid#ddd;padding:5px8px;background-color:#009F95!important;} 4、给按钮input标签添加class="btn"。代码： 5、引入jquery库，然后新建一个script标签，...
css样式中遇到！important
1、新建一个html代码页面。

2、创建一个input按钮标签，然后给这个按钮添加一个changeBg()的点击事件。

代码：<input type="button" value="点击切换背景色" onclick="changeBg()"/>

3、创建style标签，然后创建一个class类为btn用于设置按钮样式，其中按钮的背景设置background-color:#009F95!important;

代码：

<style type="text/css">

.btn{

border:1pxsolid#ddd;

padding:5px8px;

background-color:#009F95!important;

}

</style>

4、给按钮input标签添加class="btn"。

代码：<input type="button" class="btn" value="点击切换背景色" onclick="changeBg()"/>

5、引入jquery库，然后新建一个script标签，在这个标签里为changeBg()点击事件添加修改按钮的背景色。

changeBg()修改背景色代码：

functionchangeBg(){

$(".btn").css("cssText","background-color:red!important;");

}

6、保存html代码页面后使用浏览器打开，点击按钮后发现按钮背景色被修改为红色。

2020-04-11
本来不想回答的，但是我发现楼上回答有问题，会让人误解，我更正一下
!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只是不认识优先级罢了*/
}2009-12-24
假如我要对一个div在IE7中宽为200px，在IE6中宽180px，则：
div { width:200px !important; }
div { width:180px; }

!important：表示某条属性（声明）具体最高的优化级，所以虽然看起来下面的把上方的属性覆盖了，但真正由于上面度200的优化级最高，所以最后div的宽还是200px

!important：IE7及以上、Firefox都支持，但IE6不支持，所以下面的属性会把上面的覆盖，即在IE6宽显示为180px

设置此项主要的目的就是为了达到在各种及各版本的浏览器之间兼容，这里如果考虑周全的话还需对IE7及FF进行区别了2009-12-18
加 !important是为了IE6跟其他版本的浏览器区别开，因为正常情况下，CSS定义的样式在IE6、8和FF下有不同的结果，所以设计会用 !important来兼容它们，所以加有 !important的那个值其实是定义给IE8和FF的，IE6是不认这个值的2009-12-18
我也想问这个问题
我只知道!important是IE不能识别的
在FF和IE浏览不兼容的情况下用这个很好
是不是用它可以确保在除了在IE的浏览器中不出错了！2009-12-18
表示兼容

！important表示firefox可见2009-12-18
mengvlog 阅读 10 次 更新于 2025-07-19 18:09:47 我来答关注问题0
6 个回答檬味博客专题活动
  • 武汉誉祥科技 CSS中!important 作用

    CSS中的!important属性具有特殊性，它可以让浏览器优先执行带有该属性的样式规则，从而覆盖其他具有相同优先级的样式。为了直观理解这个特性，我们可以通过一个简单的示例来展示。首先，创建一个新的HTML文件，并在其中构建一个外部的div元素，然后在该元素内部嵌套两个子div元素。为外部div添加一个名为parent...

  • 猪八戒网 玩转CSS基础——import指令

    /*只有媒体是print的时候导入printstyle.css样式表*/@import"printstyle.css"print;/*只有媒体是screen并且视口宽度是768px的时候导入bg.css样式表*/@import"bg.css"screenand(max-width:768px);了解了@import基本使用后，接下里看看它与link的区别 import与link有何不同link属于HTML标签，而@import完...

  • 回忆526 CSS中!important 作用

    1、这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。具体的效果可以用一个案例演示，首先新建一个html文件，先新建一个外围div，在在里面设置两个子div，给父div设置class属性parent，第二个子div增加import的class属性：2、然后在上方的style中设置样式，给div设置宽度和高度，...

  • anonymous CSS中!important是什么意思??

    CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的，后面缀上了!important的css语句，让浏览器首选执行这个语句，因为css有继承的样式，加上!importanrt可以覆盖父级的样式。 IE6不认识它的，IE7和别的浏览器中可以用，用来处理浏览器的兼容性，这里写段代码： 黄色背景 body { ba...

  • anonymous css中为什么要把@import放在样式表的最前面?

    在CSS2.1中，任何@import命令必须放在所有其它语句之前（除了用到@charset时）。而在CSS3标准中，则是这样规定：Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet.在样式表中，任何@import命令必须紧跟在@charset命令之后...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部