您的位置: 翼速应用 > 业内知识 > web前端 > 正文

一起聊聊怎样给css强制增加优先级

本文来和大家一起聊一下怎样给css强制增加优先级。在css中,可以通过设置“!important”声明来强制增加优先级;该声明用于提高指定CSS样式规则的应用优先权,会被添加到CSS样式值的末尾以赋予该样式更多权重,语法“选择器{属性:值 !important;}”。使用“!important”规则会打破样式表的自然级联效果,使得代码难以维护;因此除非绝对必要,应尽可能避免使用!important规则,它应只在特殊情况下使用。


一起聊聊怎样给css强制增加优先级



本文适用于windows7系统、CSS3&&HTML5版、Dell G3电脑。


一起聊聊怎样给css强制增加优先级


我们可以通过设置“!important”声明来强制增加优先级:


!important声明


!important用于提高指定CSS样式规则的应用优先权;它被添加到CSS值的末尾以赋予它更多权重。


选择器{属性:值 !important;}


注意:属性:值 !important 属性值用空格隔开即可。


在CSS中,样式规则以级联方式应用于元素。下面这个列表中越靠前的权重越小:


 ● 浏览器样式:是Web浏览器声明的默认样式。


 ● 用户声明的样式:是用户使用浏览器选项设置或通过开发人员调试工具修改的自定义样式。


 ● 开发中声明的样式:是网站开发人员在CSS样式表中声明的样式。


 ● 具有!important规则的开发者声明样式。


 ● 具有!important规则的用户样式。


!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规则?


除非绝对必要,否则不应使用!important规则;使用!important规则会打破了样式表的自然级联效果,使得代码难以维护。但是,在某些情况下你必须使用!important:


1、在测试和调试网站时,!important规则是非常有用的。


如果我们的代码中存在一些CSS问题,并且希望确保应用特定的样式,则可以使用!important规则在网站上临时修复问题,直到找到更好的方法(可能需要一些时间) 。


2、输出样式表


!important规则也可用于输出样式表,以确保应用样式而不被其他任何内容覆盖。


3、结论


使用!important对于性能并没有什么负面影响;但是从可维护性角度考虑,除非绝对必要,应尽可能的避免使用!important规则,它应该只在特殊情况下使用。


以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!


特别说明:


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


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


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


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


关于怎样给css强制增加优先级的详细内容就聊到这里,翼速应用平台内有更多相关资讯,欢迎查阅!


我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 提升网站的性能快速加载的实用技巧

    网站速度很重要,快速加载的网站会带来更好的用户体验、更高的转化率、更多的参与度,而且在搜索引擎排名中也扮演重要角色,做SEO,网站硬件是起跑线,如果输在了起跑线,又怎么跟同行竞争。有许多方法可提升网站的性能,有一些技巧可以避免踩坑。

    admin
  • 织梦CMS TAG页找不到标签和实现彩色标签解决方法

    织梦cms是我们常见的网站程序系统的一款,在TAG标签中常常遇到的问题也很多。当我们点击 tags.php 页的某个标签的时候,有时会提示:“系统无此标签,可 能已经移除!” 但是我们检查程序后台,以及前台显示页面。这个标签确实存在,如果解决这个问题那?

    admin
  • HTML关于fieldset标签主要的作用

    在前端开发html页面中常用的标签很多,今天为大家带来的是关于HTML中fieldset标签主要的作用说明,根据技术分析HTML

    admin

精选专题