PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >前端问答 > 正文

css怎么强制增加优先级

原创2022-09-06 17:49:501314 + Vue前端学习QQ群(点击入群)

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

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,可以通过设置“!important”声明来强制增加优先级。

!important声明

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

选择器{属性:值 !important;}
登录后复制

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

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

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

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

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

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

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

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

示例:




    
    测试!Important



    
这一行末使用important
这一行使用了important
登录后复制

效果图:

1.png

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

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

总结:

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

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

什么时候用!important规则?

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

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

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

2、输出样式表

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

结论

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

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

特别说明:

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

.testClass{ 
    color:blue !important; 
    color:red;
}
登录后复制

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

.testClass{ 
    color:blue !important; 
} 
.testClass{ 
    color:red; 
}
登录后复制

(学习视频分享:web前端开发

以上就是css怎么强制增加优先级的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:css
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐