转载自:https://www.cnblogs.com/cang12138/p/7326280.html

!important为开发者提供了一个增加样式权重的方法,比直接在元素的 style 属性中设置 CSS 声明还要高, 一般用在 CSS 覆盖 JavaScript设置上。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试!Important</title>
</head>
<style type="text/css">
#Box div
{
color: red;
}
.important_false
{
color: blue;
}
.important_true
{
color: blue !important;
}
</style>
<body>
<div id="Box">
<div class="important_false">
这一行末使用important</div>
<div class="important_true">
这一行使用了important</div>
</div>
</body>
</html>

效果:

CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,

不同的是,第二行未使用!important,而第三行使用了!

总结:

第一行字体颜色是红色,可以证明,css样式设置中,id的优先级大于class,这行字还是红色。

第二行字体颜色是蓝色,可以证明,!important的优先级最高,important_true的css样式生效,这行字变为了蓝色!

特别说明:

!important在IE6中是不被识别的,例:

.testClass{
    color:blue !important;
    color:red;
}

这种写法在IE6下是识别不到的,.testCalss最后显示为红色,但也可以通过更改下写法让IE6识别到!important

.testClass{
    color:blue !important;
}
.testClass{
    color:red;
}

Css中的!important的更多相关文章

  1. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  2. 如何利用 jQuery 修改 css 中带有 !important 的样式属性?

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  3. css中的!important作用

    css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...

  4. CSS中的!important属性用法

    关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎 ...

  5. CSS 中的 !important 属性

    !important的作用就是提高指定样式属性的优先级. 一般情况下,我们对同一个元素设置样式属性的时候,对同一个属性设置了两个甚至多个值,像下面这样: p { /* 例1 */ color:red; ...

  6. css中!important的用法

    {*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了,以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过,可是现在发生了变化.众所周知,!impo ...

  7. CSS中"!important"的使用

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  8. CSS中!important的优先级

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  9. CSS中!important的使用 转

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...

随机推荐

  1. Flutter-SearchDelegate搜索框

    搜索欄 import 'package:flutter/material.dart'; typedef SearchItemCall = void Function(String item); cla ...

  2. NOIP2011提高组 Day1 T3 Mayan游戏

    题目描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行×5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定的步 ...

  3. 对http的研究

    HTTP 简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于 ...

  4. linux运维、架构之路-linux用户管理

    一. linux系统用户分类 1.分类 ①超级用户:root,UID为0 ②普通用户:UID是500-65535的用户 ③虚拟用户:UID在1-499,一般不能登录,满足文件或服务启动的需要,/sbi ...

  5. spring boot 开静态资源访问,配置视图解析器

    配置视图解析器spring.mvc.view.prefix=/pages/spring.mvc.view.suffiix= spring boot 开静态资源访问application.proerti ...

  6. 如何创建自定义的Resource实例

    由Resource的构造函数Resources(AssetManager assets, DisplayMetrics metrics, Configuration config)了解到,需要获取ap ...

  7. 用flask写一个简单的接口

    用falsk写一个简单的接口,这个接口的数据本来是爬虫爬取的数据,但是今天只写一个flask接口,数据就用测试数据好了. import random import re import time imp ...

  8. 测开之路六十五:UI测试平台之js

    //添加网址的函数,生成一个输入网址的标签,并且把标签append到id为cases下function browser() { var html = '\ <div class="ro ...

  9. Win7 VS2019安装后创建C++工程失败解决

    VS2019正式上手,第1个问题创建不了工程,看起来非常类似之前VS2017更新 解决办法 https://github.com/Microsoft/msbuild/issues/4286 和上次的问 ...

  10. mybatis多对一

    产品和分类的多对一关系 多个产品属于一个分类 public class Product { private int id; private String name; private float pri ...