CSS的!important属性修改权重

最新推荐文章于 2022-05-20 07:58:03 发布
最新推荐文章于 2022-05-20 07:58:03 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： html 文章标签： css html web javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45856470/article/details/116703734
版权
本文探讨了CSS中的!important属性，它用于提高样式规则的优先级。文章详细阐述了其定义、浏览器兼容性，特别是在IE6中的特殊行为，并总结了使用时的注意事项和权重规则。
摘要由CSDN通过智能技术生成

最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式。按照常理来说，越是灵活的东西，需要做的工作就会更多所以就写一篇博客梳理下!important属性。

1.定义及语法

语法格式：{ cssRule !importan}，例如：box{color:red !important;}。

作用：提高指定样式规则的应用优先权（优先级）在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

2.浏览器识别

IE7及IE7+,Firefox,chrome等浏览器下，已经可以识别 !important属性， 但是IE6.0、IE6及更早浏览器下仍然不能完全识别。!important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低!

3.由于!important的样式属性和覆盖它的样式属性单独使用时需要不在一个{}里所以就有下面情况：

首先，先看下面一段代码：

<!DOCTYPE HTML>
<html</
最低0.47元/天 解锁文章
05431
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css权重
LIANG_XJT的博客
06-08 2599
css权重 css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，也就是说同一个元素设置多条样式，谁的权重越高那么就那一条对元素起作用，如果权重相同，那么后写的元素就会覆盖前面的写的样式。 下面我们把样式的应用分为几个等级，按照等级来计算权重 1、（！important） 通过图片我们可以发现，原本是蓝色背景的div被它前面设置的样式覆盖掉了，这是因为我在样式属性值后加上了！impor...
如何使用jquery修改css中带有!important的样式属性
10-22
如何使用jquery修改css中带有!important的样式属性？下面小编就为大家带来一篇使用jquery修改css中带有!important的样式属性方法。希望对大家有所帮助。一起跟随小编过来看看吧
CSS的!important修改权重
weixin_33816611的博客
12-20 277
!important语法和描述 !important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值。 #example { font-size: 14px !important; } #container #example { font-size: 10px; } 实例说明： &lt;!DOCT...
修改带important的css样式
weixin_44235759的博客
05-20 807
js修改 //js修改行内样式 element.style.backgroundColor = "yellow"; //cssText属性修改行内样式的属性强制 myElement.style.cssText = "background-color: yellow !important;" //js修改行内样式强制覆盖 element.style.setProperty("background-color","yellow","important"); jQuery修改 // $(".test").cs
CSS-！important提升权重用法
热门推荐
zsr0526的博客
06-08 1万+
页面严禁滥用!important提升权重，只能在原子类的情况使用！且不影响继承性和就近原则。
js修改带有!important属性的css样式
nuligannima的博客
04-20 963
带有!important属性的css样式无法直接用js设置样式覆盖： 转载一篇文章，亲测有效：添加链接描述
原来CSS里的 !important 是如此用法
10-30
important`是一种特殊的权重声明，用于提高CSS属性值的优先级。当一个CSS属性值后面跟上`!important`时，该属性值将获得更高的优先级，即使有更高特异性（specificity）的选择器也无法覆盖它。 #### 二、`!...
强制CSS !important使用介绍
09-25
3. 类选择器（如`.class`）、属性选择器（如`[attr]`）和伪类（如`:hover`）：权重为10。 4. 标签选择器（如`div`）和伪元素（如`::before`）：权重为1。 5. 通用选择器（如`*`）、子选择器（如`>`）、相邻兄弟选择...
CSS !important 的使用
08-14
3. 类选择器、属性选择器和伪类（如`.myClass`, `[target]`, `:hover`）：权重为10。 4. 标签选择器和伪元素（如`div`, `::before`）：权重为1。 5. 通用选择器、子选择器、相邻兄弟选择器和后续兄弟选择器（如`*`, ...
！important属性
qq_44343244的博客
01-31 385
作用：提升属性的权重，其值为无穷大。 格式： 属性：值 !important; 注意： 1、！important提升的是属性的权重，而不能提升选择器的权重 2、！important不能提升继承过来的权重 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
!important属性
yangaoyuan1999的博客
10-30 847
1.!important是一个修饰符，他的语法是K:V !important; 错误写法： .box1 !important{ }; K:V;！important 2.!important只能提升一条语句的优先级， 不能提升一个选择器的优先级。 3.!impotent能将一条语句的优先级提升到无穷大. <!DOCTYPE html> <html lang="en">...
!important
jarisMA的博客
08-27 893
#!important !important的css定义拥有最高的优先级，既相当于让其样式放在离元素最近的地方（最下面）。 1.对IE7-10和firefox、chrome均有效 2.但其中IE6只能这样写才有效（不支持同一定义中的!important）： eg: a{ color:blue !important;/*color:blue;(无效)*/ color:red;/*color:re...
关于css 选择器权重计算规则及！important
预见的力量
10-14 1310
css 选择器权重计算规则及！important 添加css4种方法：链接外部，导入外部，内部样式表和行间。 优先级看似是行间&amp;amp;gt;内部&amp;amp;gt;链接样式&amp;amp;gt;导入样式，ID&amp;amp;gt;class&amp;amp;gt;元素。 其实比较的是权值的大小。 选择器类型 1、 ID #id 2、class .class 3、标签 p 4.通用 * 5、属性 [type=“text”]
CSS：!important样式覆盖
Schon_zh的博客
10-16 9327
Override All Other Styles by using Important 耶！我们刚刚证明了行内样式将覆盖style 中定义的所有 CSS。 但是等一下，还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的，但是在讲它之前，我们先讲讲为什么你要覆盖 CSS。 很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，...
css++什么是权值or权重,css的优先级和权重问题 以及!important优先级
weixin_33413018的博客
08-03 533
一，前言：刚加的css怎么没有渲染出来？浏览器中查看，发现是被其他的css给覆盖了，相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢？换句话说，css选择器的优先级是怎么规定的？二、正文：先上一个例子这是一个CSS选择器的测试按钮问：有多少种css选择器可以对标签样式产生影响呢？如果详细的进行分析，排列组合有太多种了，太过麻烦。我们就说说有哪几个类别：行内样式： ...
css中!important的作用
weixin_30698527的博客
08-24 982
　　{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解 这是什么原理： 　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!imp...
css选择器权重！important
最新发布
09-13
### 回答1： CSS选择器权重是用来确定当多个CSS规则应用于同一元素时，哪个规则将具有优先权的一种机制。其中，important是一种特殊的权重，它可以覆盖其他所有权重，使得该规则具有最高的优先级。但是，应该谨慎使用important，因为它可能会导致样式难以维护和修改。 ### 回答2： 在CSS中，选择器权重是用于确定样式优先级的一种机制。当多个样式规则应用到同一个元素时，通过权重机制可以确保样式的优先级。 权重由四个不同的组成部分组成，它们分别是： 1. !important：!important是最高优先级的标记，当一个样式规则被标记为!important时，它将覆盖其他所有的样式规则，无论其他规则的权重如何。 2. 内联样式：内联样式是直接应用于HTML元素上的样式，通过在元素的style属性中定义样式规则。它的优先级次于!important标记的规则。 3. ID选择器：ID选择器是通过HTML元素的id属性来定义的，而且是具有唯一性的。ID选择器的优先级高于内联样式。 4. 类选择器、伪类选择器和属性选择器：这些选择器通过HTML元素的class、伪类或属性来定义样式规则，它们的优先级低于ID选择器。 在权重比较中，如果两个或多个样式规则具有相同的权重，那么后面出现的规则将覆盖前面的规则。例如，如果一个样式规则使用了!important标记，那么无论其他规则的权重如何，它都将具有最高优先级。 总结起来，使用!important会覆盖其他所有规则，内联样式的优先级次于!important，ID选择器的优先级高于内联样式，而类选择器、伪类选择器和属性选择器的优先级低于ID选择器。 在实际应用中，尽量避免使用!important，以免造成样式优先级混乱。正确地组织和编写样式规则可以使得样式的优先级更加清晰和可维护。 ### 回答3： CSS中的选择器权重是用来决定样式的优先级的。它决定了当多个选择器同时应用到同一个元素时，哪个样式规则会被优先选择。 !important 是一种特殊的选择器权重，用于强制覆盖其他选择器的样式规则。当某个样式规则使用了 !important，它将拥有最高的优先级，其他选择器无论权重如何，都无法覆盖这个样式规则。 因为 !important 具有最高权重，所以它的使用应该谨慎。过度使用 !important 可能会导致样式失控，且很难维护和调试。应该尽量避免使用 !important，只在确实需要覆盖其他样式时才使用。 当多个选择器都使用了 !important，它们的优先级将依次由高到低决定。如果具有相同优先级的选择器同时使用了 !important，那么后面出现的样式规则会覆盖前面的样式规则。 除了 !important，CSS中还有其他选择器权重的规则。一般来说，选择器权重由以下规则决定：标签选择器 < 类选择器 < ID 选择器，同时还有内联样式的权重最高。当相同类型的选择器同时应用到元素时，权重高的样式规则将覆盖权重低的样式规则。 总之，选择器权重是用来决定样式规则优先级的。 !important 是一种特殊的选择器权重，用于强制覆盖其他选择器的样式规则。虽然有时候使用 !important 可以解决样式冲突的问题，但应该尽量避免过度使用，以免出现样式失控的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值