blocks|key|2143951|text|您可以用以下方法覆盖它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2143952|+body+.hide+{+display:+none+!important;+}

+.someclass.hide+{+display:+none+!important;+}|code-block|syntax|javascript|2143953|这两个例子具有更高的优先级。|2143954|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can overwrite this with:

<pre><code> body .hide { display: none !important; }

 .someclass.hide { display: none !important; }
</code></pre>

those two examples have higher priority

blocks|key|1067466|text|您不需要编辑原始源代码。只需创建一个样式表并将其放在引导样式表之后，并将其添加到其中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067467|+.hide+{+display:+block+!important;+}|code-block|syntax|javascript|1067468|现在，说了这些话，我会非常小心地这样做。您不知道您的站点中有多少元素应用了这个类，而且您几乎肯定会得到意想不到的结果。|1067469|显然这类申请是有原因的，我建议：|1067470|别这么做|ordered-list-item|1067471|向元素中添加一些其他类，并向其中添加样式。调整标记(如果需要的话使用js应用类)如下：|1067472|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|U|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|V|8|@]|9|@]|A|$]]|$1|N|3|O|5|M|7|W|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|Q|$]]

You don't need to edit the original source code. Just create a stylesheet and place it after the Bootstrap stylesheets and add this to it:

<pre><code> .hide { display: block !important; }
</code></pre>

Now, having said this, I would be very careful about doing this. You don't know how many elements across your site have applied this class, and you will almost certainly get unanticipated results. 

There is obviously a reason that this class has been applied, I would suggest either:

<ol>
<li>don't do this</li>
<li>add some other class to the element and add styles to that. Adjust your markup (or use js to apply the class if need be) to something like:

<pre><code>&lt;div class="hide custom-hide-reset"&gt;&lt;/div&gt;
</code></pre>

Then add this style to the stylesheet you've created:

<pre><code>.custom-hide-reset { display: none; }
</code></pre></li>
</ol>

blocks|key|109634|text|可以通过另一个!important值重写当前的值，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|109635|.col{+color:red+!important;+}
.col{+color:green;+}+//+wont+work
.col{+color:blue+!important;+}+//+will+work+and+set+color+blue+instead+of+red|code-block|syntax|javascript|109636|演示。|109637|最新情况：|109638|这个问题与JavaScript无关，但作为替代，您可以使用这些技术完成任务，使用JavaScript删除规则，然后再次添加新规则。|109639|function+getCSSRule(ruleName,+deleteFlag)+{+++++++++++++++
+++ruleName=ruleName.toLowerCase();+++++++++++++++++++++++
+++if+(document.styleSheets)+{++++++++++++++++++++++++++++
++++++for+(var+i=0;+i<document.styleSheets.length;+i%2B%2B)+{+
++++++++++var+styleSheet=document.styleSheets[i];++++++++++
+++++++++var+ii=0;++++++++++++++++++++++++++++++++++++++++
+++++++++var+cssRule=false;+++++++++++++++++++++++++++++++
+++++++++do+{+++++++++++++++++++++++++++++++++++++++++++++
++++++++++++if+(styleSheet.cssRules)+{++++++++++++++++++++
++++++++++++++++cssRule+=+styleSheet.cssRules[ii];+++++++++
++++++++++++}+else+{++++++++++++++++++++++++++++++++++++++
++++++++++++++++cssRule+=+styleSheet.rules[ii];++++++++++++
++++++++++++}+++++++++++++++++++++++++++++++++++++++++++++
++++++++++++if+(cssRule)++{+++++++++++++++++++++++++++++++
++++++++++++++++if+(cssRule.selectorText.toLowerCase()==ruleName)+{+
++++++++++++++++++++if+(deleteFlag=='delete')+{+++++++++++++
++++++++++++++++++++++++if+(styleSheet.cssRules)+{+++++++++++
++++++++++++++++++++++++++++styleSheet.deleteRule(ii);++++++++
++++++++++++++++++++++++}+else+{+++++++++++++++++++++++++++++
++++++++++++++++++++++++++++styleSheet.removeRule(ii);++++++++
++++++++++++++++++++++++}++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++return+true;+++++++++++++++++++++++++
++++++++++++++++++++}+else+{++++++++++++++++++++++++++++++++
++++++++++++++++++++return+cssRule;++++++++++++++++++++++
++++++++++++++++}+++++++++++++++++++++++++++++++++++++++
++++++++++++}++++++++++++++++++++++++++++++++++++++++++
++++++++}+++++++++++++++++++++++++++++++++++++++++++++
++++++++ii%2B%2B;+++++++++++++++++++++++++++++++++++++++++
++++++++}+while+(cssRule)++++++++++++++++++++++++++++++++
++++++}+++++++++++++++++++++++++++++++++++++++++++++++++++
+++}++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++return+false;++++++++++++++++++++++++++++++++++++++++++
}+++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function+killCSSRule(ruleName)+{++++++++++++++++++++++++++
++++return+getCSSRule(ruleName,'delete');++++++++++++++++++
}+++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function+addCSSRule(ruleName,+v)+{++++++++++++++++++++++++
++++if+(document.styleSheets)+{++++++++++++++++++++++++++++
++++++++if+(!getCSSRule(ruleName))+{++++++++++++++++++++++++
++++++++++++if+(document.styleSheets[0].addRule)+{+++++++++++
++++++++++++++++document.styleSheets[0].addRule(ruleName,+v,0);
++++++++++++}+else+{+++++++++++++++++++++++++++++++++++++++++
++++++++++++++++document.styleSheets[0].insertRule(ruleName%2B'{'%2Bv%2B'}',+0);
++++++++++++}++++++++++++++++++++++++++++++++++++++++++++++++
++++++++}+++++++++++++++++++++++++++++++++++++++++++++++++++
++++}++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++return+getCSSRule(ruleName);
}
//+Check+the+rule+before+deleting
console.log(getCSSRule('.col'));+//+.col+{+color:red+!important;+}
//+At+first+remove+the+current+rule
killCSSRule('.col');
//+Now+assign+nre+rule
addCSSRule('.col',+'color:+red');
//+Check+the+rule+after+deleting
console.log(getCSSRule('.col'));+//+.col+{+color:red;+}|109640|。+(资料来源：带Javascript的Pwn+CSS+)|109641|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/heera/bZ5up/|1|http://jsfiddle.net/heera/bZ5up/2/|2|http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript^0|7|A|0|0|0|3|0|0|0|5|A|14|A|0|0|0|1|1|8|J|2|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|M|3|N|5|6|7|1E|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]|$9|1P|A|1Q|1|1R]]|E|$]]|$1|U|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]|14|$5|X|Y|Z|E|$10|15]]]]

You can override the current <code>!important</code> value by another one like

<pre><code>.col{ color:red !important; }
.col{ color:green; } // wont work
.col{ color:blue !important; } // will work and set color blue instead of red
</code></pre>

<a href="http://jsfiddle.net/heera/bZ5up/" rel="nofollow">DEMO.</a>

<h2>Update :</h2>

This question is not about <code>JavaScript</code> but as an alternative you can accomplish the task using these technique, remove the rule using <code>JavaScript</code> and then add a new rule again.

<pre><code>function getCSSRule(ruleName, deleteFlag) { 
 ruleName=ruleName.toLowerCase(); 
 if (document.styleSheets) { 
 for (var i=0; i&lt;document.styleSheets.length; i++) { 
 var styleSheet=document.styleSheets[i]; 
 var ii=0; 
 var cssRule=false; 
 do { 
 if (styleSheet.cssRules) { 
 cssRule = styleSheet.cssRules[ii]; 
 } else { 
 cssRule = styleSheet.rules[ii]; 
 } 
 if (cssRule) { 
 if (cssRule.selectorText.toLowerCase()==ruleName) { 
 if (deleteFlag=='delete') { 
 if (styleSheet.cssRules) { 
 styleSheet.deleteRule(ii); 
 } else { 
 styleSheet.removeRule(ii); 
 } 
 return true; 
 } else { 
 return cssRule; 
 } 
 } 
 } 
 ii++; 
 } while (cssRule) 
 } 
 } 
 return false; 
} 

function killCSSRule(ruleName) { 
 return getCSSRule(ruleName,'delete'); 
} 

function addCSSRule(ruleName, v) { 
 if (document.styleSheets) { 
 if (!getCSSRule(ruleName)) { 
 if (document.styleSheets[0].addRule) { 
 document.styleSheets[0].addRule(ruleName, v,0);
 } else { 
 document.styleSheets[0].insertRule(ruleName+'{'+v+'}', 0);
 } 
 } 
 } 
 return getCSSRule(ruleName);
}
// Check the rule before deleting
console.log(getCSSRule('.col')); // .col { color:red !important; }
// At first remove the current rule
killCSSRule('.col');
// Now assign nre rule
addCSSRule('.col', 'color: red');
// Check the rule after deleting
console.log(getCSSRule('.col')); // .col { color:red; }
</code></pre>

<a href="http://jsfiddle.net/heera/bZ5up/2/" rel="nofollow">DEMO.</a> ( Source : <a href="http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript" rel="nofollow">Totally Pwn CSS with Javascript</a> )

blocks|key|109643|text|样式表对象可以从javascript访问。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|109644|var+sheets+=+document.styleSheets|code-block|syntax|javascript|109645|一旦您有了样式表数组，就可以遍历这些规则了。|109646|var+rules+=+sheets[i].cssRules+%7C%7C+sheets[i].rules+//+browser+dependency|109647|每个规则都有一个style属性，按照通常的方式是可变的。|offset|length|style|CODE|109648|rule.style[cssPropName]+=+value;|109649|根据浏览器的不同，工作表上有一种方法可以根据索引(+deleteRule或removeRule+)删除规则。|109650|总之，您可以找到规则并编辑它，或者删除并以修改后的形式重新添加它。|109651|参考资料：http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml#.Ujsin4ZmjAs|109652|entityMap|0|LINK|mutability|MUTABLE|url|http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml#.Ujsin4ZmjAs^0|0|0|0|0|8|5|0|0|Q|A|11|A|0|0|5|20|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1A|8|@$M|1B|N|1C|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1E|8|@$M|1F|N|1G|O|P]|$M|1H|N|1I|O|P]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1K|8|@]|9|@$M|1L|N|1M|1|1N]]|A|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

The stylesheet objecs are accessible from javascript

<pre><code>var sheets = document.styleSheets
</code></pre>

Once you have the stylesheet array, you can iterate over the rules

<pre><code>var rules = sheets[i].cssRules || sheets[i].rules // browser dependency
</code></pre>

Each rule has a <code>style</code> property, which is mutable in the usual way.

<pre><code>rule.style[cssPropName] = value;
</code></pre>

There is a method on the sheet to delete a rule by index, either <code>deleteRule</code> or <code>removeRule</code>, depending on the browser.

Bottom line, you can find the rule and either edit it or delete and re-add it in a modified form.

Reference: <a href="http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml#.Ujsin4ZmjAs" rel="nofollow">http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml#.Ujsin4ZmjAs</a>

blocks|key|2144071|text|因为这个问题可以分成两个部分|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2144072|blockquote|2144073|如何从应用于我的页面的规则中删除!important|unordered-list-item|offset|length|style|CODE|2144074|而不改变它的价值|2144075|而不编辑原始CSS文件。|2144076|对于纯粹的冒险精神，我认为有以下几种方式是可能的：|2144077|用jQuery加载CSS；|ordered-list-item|2144078|通过搜索.hide+{+display:+none+!important;+}并用.hide+{+display:+none;+}替换它的内容；|2144079|将新的内存中修改后的CSS应用于页面.|2144080|考虑到好的这个答案中的解决方案，它可以用一些东西(完全未经测试，只是为了得到这个想法)进行修改，比如：|2144081|$.get(myStylesLocation,+function(css)
{
+++var+alteredCss+=+css.replace(".hide+{+display:+none+!important;+}",".hide+{+display:+none;+}");
+++$('<style+type="text/css"></style>')
++++++.html(alteredCss)
++++++.appendTo("head");
});|code-block|syntax|javascript|2144082|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/805406/1654265^0|0|0|G|A|0|0|0|0|0|4|Z|15|O|0|0|5|A|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|-4|5|C|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1E|8|@$G|1F|H|1G|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|1H|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|1I|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1K|8|@]|9|@]|A|$]]|$1|T|3|U|5|S|7|1L|8|@$G|1M|H|1N|I|J]|$G|1O|H|1P|I|J]]|9|@]|A|$]]|$1|V|3|W|5|S|7|1Q|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1R|8|@]|9|@$G|1S|H|1T|1|1U]]|A|$]]|$1|Z|3|10|5|11|7|1V|8|@]|9|@]|A|$12|13]]|$1|14|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

Since the question can be splitted in 

<blockquote>
 <ul>
 <li>how can I remove <code>!important</code> from a rule applied to my page but</li>
 <li>without changing its value and </li>
 <li>without editing the original CSS file</li>
 </ul>
</blockquote>

For pure spirit of adventure only, I think it would be possible in the following way:

<ol>
<li>load the CSS with jQuery;</li>
<li>perform a replacement of its content, by searching <code>.hide { display: none !important; }</code> and replacing it with <code>.hide { display: none; }</code>;</li>
<li>apply the new in-memory altered CSS to the page.</li>
</ol>

Taking for good <a href="https://stackoverflow.com/a/805406/1654265">the solution posted in this answer</a>, it could be modified with something (totally untested, just to get the idea) like:

<pre><code>$.get(myStylesLocation, function(css)
{
 var alteredCss = css.replace(".hide { display: none !important; }",".hide { display: none; }");
 $('&lt;style type="text/css"&gt;&lt;/style&gt;')
 .html(alteredCss)
 .appendTo("head");
});
</code></pre>

Is possible to make an important property value from CSS selector a non important one?

<hr>

For example: <a href="https://github.com/twbs/bootstrap/blob/26727bfefd46059a6ce66be7ed0e54910870efd9/less/utilities.less#L26-L28" rel="nofollow">Bootstrap 3 defines <code>.hide</code> class</a> as:

<pre><code> .hide { display: none !important; }
</code></pre>

Is possible to remove the important value without modifying the BS3 source code?

Thinking at somethingl iike

<pre><code> .hide { display: none !remove-important; }
</code></pre>

<hr>

Note that I want to keep the same value! I don't want to set <code>block !important</code> to <code>.hide</code> class because that would not be correct...

I already added a new class <code>.hide-non-important</code> and used it where it was needed:

<pre><code> .hide-not-important { display: none; }
</code></pre>

...but the question is: is there any alternative to this?

Is possible to make an important property value from CSS selector a non important one?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否可以将CSS选择器中的重要属性值设置为不重要的属性值？例如：作为： .hide { display: none !important; }是否可以在不修改BS3源代码的情况下删除重要的值？思考一些我喜欢的事情 .hide { display: none !remove-important; }请注意，我希望保持相同...

问是否可以将CSS选择器中的重要属性值设置为不重要的属性值？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以将CSS选择器中的重要属性值设置为不重要的属性值？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以将CSS选择器中的重要属性值设置为不重要的属性值？
EN