`

CSS何时可以使用!important

    博客分类:
  • css
css 
阅读更多

 

1、帮助测试可访问性

 

正如前面提到过的,用户样式中可以包含!important声明,允许用户根据自己的特殊需求来给具体的CSS样式增加权重以帮助他们阅读和访问内容。

 

有特殊需求的用户可以把!important加到像font-size这样的打印属性上来加大字体,或者为了提高网页的对比度而把它加到与颜色相关的样式上。

 

 

 

2、暂时解决紧急问题

 

总会有这样的情况发生——某个客户的线上网站出现了CSS的bug,你必须快速修复。在大多数情况下你应该会用Firebug或者其他的开发者工具来调试你的CSS代码并且最终修复它。但是,如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候,你可能需要使用!important来完成快速修复。

 

当你用这个临时修复的办法让网站继续上线以后(这样可以先摆平客户),你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。当你找到更好的解决方案你就可以替换掉线上的!important部分,而且客户对此毫不知情。

 

 

3、用Firebug或者其他开发者工具覆写样式

 

我们可以使用Firebug或者Chrome开发者工具(译注:两者均可用F12唤出)查看页面元素,在不影响真正的CSS样式的情况下可以自由地编辑样式,测试效果,调试bug等等。

 

!important可以被加在单行样式的后面从而让已经被覆盖的样式重新作用。这样的话,你不用大量修改你真正的样式就可以调试你的CSS,直到你找到问题所在。

 

 

 

4、覆写用户生成内容中的行内样式

 

CSS开发中一个让人头疼的问题,就是当我们遇到用户生成内容中有行内样式的情况,这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统中。在CSS层叠中,行内样式会覆盖常规样式。然而,我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。此时你就可以用!important来避免这种问题,因为,一条被开发者加了!important的样式会覆盖行内样式。

 

 

 

5、关于单独设计的博客页面

 

如果你曾经接触过设计个人博客页面的技术,有一种需求要求每个单独的文章都要有它自己独立的样式,需要使用行内样式。你可以用!important代码为一个个人页面编写它自己的样式。

 

!important在这个时候可以派上用场,为了在你的站点里创建一个独一无二的页面,你可以轻松覆盖默认的样式而不必担心原本的CSS权重。

 

 

 

参考资料:  css !important的用法    http://www.studyofnet.com/news/406.html

 

分享到:
评论

相关推荐

    CSS !important 的使用

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的语言。...通过实践,你可以更好地掌握何时以及如何正确使用`!important`来优化你的CSS代码。

    CSS中的!important规则:使用指南与最佳实践

    important规则是一个强大的工具,它可以在特定情况下覆盖其他CSS规则。然而,由于其对样式层叠的强烈影响,!important的使用需要谨慎。本文将深入探讨!important的工作原理、使用场景以及如何合理地应用它,以避免...

    原来CSS里的 !important 是如此用法

    important`可以应用于内部样式表或外部样式表中,也可以应用于内联样式中。但是一般来说,内联样式中的`!important`会覆盖其他类型的`!important`声明。 #### 三、示例解析 在给定的示例中,我们有两个`div`元素,...

    css中提升优先级属性!important的用法总结

    important` 可以作为临时解决方案来快速覆盖已有样式,但它不推荐在生产环境中大量使用,因为它会使CSS难以维护和管理。 5. **优先级规则**:CSS优先级的计算基于选择器的特异性,`!important` 相当于增加了无限的...

    react-embedded-animations:React库可在嵌入式体验中使用动画,其中需要在CSS中使用!important

    React库可以在嵌入式体验上使用动画,而CSS中需要使用!important。 什么时候使用 在大多数情况下,不应使用该库,仅在以下情况下使用: 如果需要在动画CSS上使用!important 安装 npm install --save react-...

    CSS中的!important属性用法

    important`属性,它可以强制一个CSS规则在所有其他规则之上生效。 来看一个具体的例子: ```css #a { margin-left: 30px !important; margin-left: 20px; } ``` 在这个例子中,我们有一个ID为"a"的div元素。在...

    通过jquery修改带有!important的样式

    在这个例子中,我们使用`$('#myLink')`选择器选择了ID为`myLink`的元素,并使用`.css('cssText', ...)`方法来更新其样式。注意这里使用的语法格式是`'background: url(/path/to/new/image.jpg) !important;'`,确保...

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

    ”test”>使用jquery修改css中带有!important的样式属性 外部样式为: div.test{ width:auto !important; overflow:auto !important } 通过 $(“div.test”).css(“width”,”100px”);和 $(“div.test”).css(...

    详解CSS样式中的!important、*、_符号

    important、*和_在CSS中均与样式的优先级有关,但在实际的网页设计和开发中,为了保持代码的可维护性和兼容性,我们更推荐使用CSS预处理器、JavaScript以及现代的CSS特性如Flexbox和Grid布局等来处理样式的优先级和...

    CSS下!important属性

    important属性在特定情况下是非常有用的,它可以帮助开发者解决一些棘手的样式问题,但是需要注意合理使用,以保证项目的可维护性。在使用时,也应该考虑到浏览器的兼容性问题,尤其是在旧版浏览器(如IE6)中,!...

    postcss-important:PostCSS插件,用于基于`!important`的注释

    重要性 PostCSS插件,用于基于!important注释 安装 $ npm install postcss-important 例子 // Dependencies var fs = require ( 'fs' ) var postcss = require ( 'postcss' ) ... 使用此input.css : . foo { /*

    从可维护性角度考虑css的!important规则的可用性

    important`的使用在维护大型CSS代码库时可能会带来问题。因为它使得样式优先级变得难以预测,这可能会导致以下挑战: 1. **降低可读性和可理解性**:开发者可能需要花费更多时间来追踪哪些样式被`!important`覆盖,...

    曹鹏CSS视频教程-54.冲突与!important.rar

    通过这个教程,你不仅可以学习到如何处理CSS中的冲突,还可以了解如何优雅地使用“!important”规则,从而提升你的网页设计技能。同时,掌握这些知识有助于避免在实际项目中遇到样式问题时感到困惑,使你的网页设计...

    css常见考题 !!css常见考题 css常见考题

    important`,可以在CSS规则中使用以提高优先级。 - IE也支持`!important`,但需要注意不要滥用。 - **示例代码:** ```css .important-style { color: red !important; } ``` #### 六、垂直居中技巧 **知识...

    css中!important的作用(IE6 IE7 FF)及其原理

    important`规则有时可以作为hack来实现特定浏览器的样式调整。 首先,`!important`的工作原理是这样的:当一个CSS声明后面加上`!important`时,这个声明的优先级将高于其他没有`!important`的声明,即使这些声明在...

    CSS中提升优先级属性!important的用法问题总结

    important` 可以确保指定的样式被应用。例如: ```css div { margin-left: 20px !important; } div { margin-left: 40px; } ``` 在这个例子中,尽管第二个规则设置了 `margin-left` 为 40px,但因为第一个规则...

    强制CSS !important使用介绍

    important`是CSS中一个强大的工具,用于解决样式优先级问题,但应谨慎使用,以免导致样式管理的混乱。在理解和熟练掌握CSS选择器权重的基础上,合理地运用`!important`,可以更好地控制页面的呈现效果。

Global site tag (gtag.js) - Google Analytics