小白教程
所有教程
关于
Search
172.70.135.205
172.70.135.205
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS !important”的源代码
本页内容
上一节:
CSS_网页布局
下一节:
CSS_总结
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS !important}}[[Category:CSS 教程|38]] = CSS !important 规则 = === 什么是 !important === CSS 中的 !important 规则用于增加样式的权重。 !important 与优先级无关,但它与最终的结果直接相关,使用一个 !important 规则时,此声明将覆盖任何其他声明。 <sample title="" desc="" lang="html" hererun="1"> #myid { background-color: blue; } .myclass { background-color: gray; } p { background-color: red !important; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #myid { background-color: blue; } .myclass { background-color: gray; } p { background-color: red !important; } </style> </head> <body> <p>段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p> <p class="myclass">段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p> <p id="myid">段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p> </body> </html> </run> 以上实例中,尽管 ID 选择器和类选择器具有更高的优先级,但三个段落背景颜色都显示为红色,因为 !important 规则会覆盖 background-color 属性。 === 重要说明 === 使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。 当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。 以下实例我们在查看 CSS 源码时就不是很清楚哪种颜色最重要: <sample title="" desc="" lang="html" hererun="1"> #myid { background-color: blue !important; } .myclass { background-color: gray !important; } p { background-color: red !important; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #myid { background-color: blue !important; } .myclass { background-color: gray !important; } p { background-color: red !important; } </style> </head> <body> <p>段落中的一些文本内容!!!</p> <p class="myclass">段落中的一些文本内容!!!</p> <p id="myid">段落中的一些文本内容!!!</p> </body> </html> </run> '''使用建议:''' * '''一定'''要优先考虑使用样式规则的优先级来解决问题而不是 <code>!important</code> * '''只有'''在需要覆盖全站或外部 CSS 的特定页面中使用 <code>!important</code> * '''永远不要'''在你的插件中使用 <code>!important</code> * '''永远不要'''在全站范围的 CSS 代码中使用 <code>!important</code> === 何时使用 !important === 如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important。 比如我们要让网站上所有按钮的样式都一样: <sample title="" desc="" lang="html" hererun="1"> .button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } </style> </head> <body> <p>标准按钮: <a class="button" href="/css/">CSS 教程</a></p> <div id="myDiv"> <p>div 中的一个链接: <a href="/html/">HTML 教程</a></p> <p>div 中的链接按钮: <a href="/html/" class="button">HTML 教程</a></p> </div> </body> </html> </run> 如果我们将按钮放在另一个具有更优先级的元素中,按钮的外观就会发生变化,并且属性会发生冲突,如下实例: <sample title="" desc="" lang="html" hererun="1"> .button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } #myDiv a { color: red; background-color: yellow; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } #myDiv a { color: red; background-color: yellow; } </style> </head> <body> <p>标准按钮: <a class="button" href="/css/">CSS 教程</a></p> <div id="myDiv"> <p>div 中的一个链接: <a href="/html/">HTML 教程</a></p> <p>div 中的链接按钮: <a href="/html/" class="button">HTML 教程</a></p> </div> </body> </html> </run> 如果想要设置所有按钮具有相同的外观,我们可以将 !important 规则添加到按钮的样式属性中,如下所示: <sample title="" desc="" lang="html" hererun="1"> .button { background-color: #8c8c8c !important; color: white !important; padding: 5px !important; border: 1px solid black !important; } #myDiv a { color: red; background-color: yellow; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .button { background-color: #8c8c8c !important; color: white !important; padding: 5px !important; border: 1px solid black !important; } #myDiv a { color: red; background-color: yellow; } </style> </head> <body> <p>标准按钮: <a class="button" href="/css/">CSS 教程</a></p> <div id="myDiv"> <p>div 中的一个链接: <a href="/html/">HTML 教程</a></p> <p>div 中的链接按钮: <a href="/html/" class="button">HTML 教程</a></p> </div> </body> </html> </run>
返回至“
CSS !important
”。
上一节:
CSS_网页布局
下一节:
CSS_总结