python html5 bootstrap 视频教程

德云社区

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

数字 IDE 网页 ── \"所见即所得\" 编写 HTML4、HTML5 静态 \"网站站群\" 动态网站,生成 Robots、站点地图,死链检测,强大文本编辑器功能。。。集成中英自动 TTS 文本诵读功能。。。
数字 IDE Python ── 支持 \"极速编写-重构\" Python、Django、HTML5、XML、C/C++、Java、Perl、PHP、Ruby、C#、VB .Net 等程序源代码。。。集成了很多常用编程智能辅助工具。。。
业务范围:
01、企业 \"内部 | 外部\" 数据管理、分析、挖据
02、企业效率优化专用 APP 程序定制、IT 外包
03、智能数字化系统平台架设、开发、部署、维护
04、高仿真、低成本,可动画-可 VR 数字样机建模、开发、规划
05、企业 Linux 云计算 \"IaaS | SaaS\" 服务器架设、开发、部署、维护
06、\"标准 | 非标\" 设备全流程研发,PLC、单片机、工控系统开发、集成
07、企业 Linux / Windows 平台 PLM、ERP 系统架设、开发、部署、维护
08、企业 Linux / Windows 平台 \"内网 | 外网\" 服务器架设、开发、部署、维护
09、企业微信公众号智能互动营销、策划,Web 网站代码、SEO 排名优化,大数据网络推广
10、企业跨平台、跨硬件、跨浏览器 HTML5 Web 电子商务平台、\"静态 | 动态\" 网站开发、部署、维护
11、企业文档、资料、公司网页多语种翻译,数据资料标准化、版本化、数字化管理的规划、研发、实施
数字翻译 ── 能 \"批量翻译\" 文档 GUI 用户界面。。。网页浏览 批处理 全文搜索 全文替换 全文删除 全文插入 数据比较 。。。集成中英自动 TTS 文本诵读功能。。。
查看: 976|回复: 2

css 中 !important 的作用与用法

[复制链接]

161

主题

271

帖子

1182

积分

超级版主

Rank: 8Rank: 8

金钱
702
金币
17
威望
0
贡献
0
发表于 2014-12-4 01:52:05 | 显示全部楼层 |阅读模式
|          

       {*rule !important} 这个 css 规则当今在网页制作的时候的普及已经非常流行了,以前大家对它的理解可能还停留在 ‘浏览器是否识别阶段’ 而没有真正去研究过。众所周知,!important 这个规则对IE 6.0、IE 7.0 和 Firefox 能写 hack,现在就来讲解这是什么原理:

  *对于 IE 系列浏览器都能够识别, firefox 浏览器则不能识别;
  !important 只有 IE 7.0 和 firefox 可以识别,但是 IE 6.0 不能成功应用.

  (1)区别 IE 与 firefox 的 hack 为:border:2px solid #f00;*border:1px solid #f00;
  (2)区别 IE 6.0 与 IE 7.0、firefox 的 hack 为:border:1px solid #f00!important;border:2px solid #f00;


  在(1)中,之所以把 * 放在后面是因为 ff 不识别 *而导致只对它设置了一次 border;而 IE 系列进行了两次 border 设置后,后一个属性覆盖了前一个属性,故为一像素的边框。
  在(2)中,之所以把 !important 放在第一个 border 设置,是因为它把这次 border 的优先级提高了,即使后面在一次甚至在 N 次设置家border 也无效,但是 IE 6.0 对这个规则不接受,而导致它应用了第二次的 border 设置,也就是第二次覆盖了第一次的这一原理, 并不是它不识别 !important; 所以它的 border 为 2 像素的红框。

以下是一个简单应用:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div
{
width
:800px;
height
:250px;
background-color
:yellow!important;/*提升指定样式规则的应用优先权*/
background-color
:red;
border
:3px solid #000!important;/*firefox*/
*border
:5px solid #f00!important;/*Ie7.0*/
border
:1px solid #000;/*Ie6.0*/
}
</style>
</head>

</html>

例一:
CSS
1 #Box {
2      color:red !important;
3      color:blue;
4 }
HTML
1 <div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>
这个例子应该是大家经常见到的 important 用法了,在 IE 环境下,这行字是蓝色,在 firefox 下,为红色,其用法不再多说了,看下一个例子。

例二:
CSS

1 #Box div{
     color
:red;
}
2 .important_false
{
     color
:blue;
}
3.important_true
{
     color
:blue !important;
}

HTML
<div id="Box">
    <div class="important_false">这一行末使用important</div>
    <div class="important_true">这一行使用了important</div>
</div>
  例二中,CSS代码第一行设定了 box 里面所有 div 中字体色为红色,第二行和第三行都用 class 重新定义了自身 div 的字体色为蓝色,不同的是,第二行末使用 important,而第三行使用了!

  默认情况下,class 的优先级小于
important,所以,第二行中即使使用了 class 重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!
  但是,第三行中,用了 important 提升优先级(或看成强制重定义),所以这里的 css 得以生效,这行字变为了蓝色!从这个例子,得以证明,IE 对 important 并不是不支持!
  那么为什么很多人都说 IE 不认识它呢?我想应该是大家实战中可能都没有遇到例子中的情况: 当你想提升 class 的优先级时怎么办?

  也就是说大家可能忽略了它的这一作用,只了解在命名为同一个元素的 CSS 代码块中,用它来提升排列顺序相对靠前的代码的优先级(例一)!

  通过上边两个例子,得以总结:

        important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升 class 的优先级(比如 firefox),但是从 IE 对前者的不支持可以看出,这只是 IE 的一大BUG,而不能说它“不认识、不支持”        

然而,不管怎么样,IE 的这一大 BUG 帮助我们解决了很多兼容性问题,这显然不是件坏事!

        在 IE 中对盒模型(box-model)的解释是有 BUG 的,IE 6.0 之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上)。例如,你可能会使用以下 css 来指定某个容器的尺寸:
1 #box
2   {
3    width:100px;
4    border:5px;
5    padding:20px;
6   }
  然后在 html 中应用:盒的总宽度在几乎所有浏览器中为 150 像素(100 像素宽度 + 两条 5 像素的边框 + 两个 20 像素的填充),唯独在 IE6 之前版本的浏览器中仍然为 100 像素(边框值和填充值包含在宽度值中),使用盒模型的 hack 可以解决这一问题,
#box
  
{
   width
:150px;        //这个是错误的width,所有浏览器都读到了
   voice-family
: \}\;      //IE5.X/win忽略了\}\后的内容
   voice-family:inherit;
   width:100px;       //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
  }
       还有更简单的办法如下:
  CSS:
  #box
{ width:150px; }
  #box div
{ border:5px; padding:20px; }
  HTML:
  ...
  这样一来在任何浏览器中盒的总宽度都将是 150 像素。
  但是即使是到了最新的 IE6.0 依然存在浮动模型(Float-model)的问题,值得庆幸(还是悲哀?)的是我们可以用 IE 中一直都不支持的 !important 来解决这个问题。

  !important 是 CSS1 就定义的语法,作用是提高指定样式规则的应用优先权(参见:W3.org 的解释)。语法格式{ sRule!important },即写在定义的最后面,
     例如:

box{color:red !important;}
  假如我们定义一个这样的样式:
#box{background-color: #ffffff !important; background-color: #000000;}
  那么在支持该语法的浏览器,如 Firefox、Opera 中,能够理解 !important 的优先级,背景显示 #ffffff 颜色,而在 IE 中则显示 #000000。

版权声明:               
本文由 德云社区 整理,原文来自网络。
AI人工智能 语音助理 人工翻译 教程
回复

使用道具 举报

161

主题

271

帖子

1182

积分

超级版主

Rank: 8Rank: 8

金钱
702
金币
17
威望
0
贡献
0
 楼主| 发表于 2014-12-4 01:56:32 | 显示全部楼层
占用
在线订购 便捷实惠 品质保证 终生保修
回复

使用道具 举报

161

主题

271

帖子

1182

积分

超级版主

Rank: 8Rank: 8

金钱
702
金币
17
威望
0
贡献
0
 楼主| 发表于 2014-12-4 01:56:44 | 显示全部楼层
占用
AI人工智能 语音助理 人工翻译 教程
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|Sitemap|手机版|小黑屋| |网站地图  

GMT+8, 2018-12-10 09:12 , Processed in 0.051728 second(s), 29 queries .

技术支持 乐数软件  版权所有 © 2014-2019 德云社区

工业和信息化部:粤ICP备14079481号-2

快速回复 返回顶部 返回列表