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

Posted 2023-03-06

【中文标题】是否可以将 CSS 选择器中的重要属性值设为不重要的属性值？

【英文标题】：Is possible to make an important property value from CSS selector a non important one?

【发布时间】：2013-09-24 19:39:53

【问题描述】：

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

---

例如：Bootstrap 3 defines .hide class 为：

 .hide  display: none !important; 

是否可以在不修改BS3源代码的情况下删除重要值？

思考类似的东西

 .hide  display: none !remove-important; 

---

请注意，我想保持相同的值！我不想将block !important 设置为.hide 类，因为那是不正确的......

我已经添加了一个新类 .hide-non-important 并在需要的地方使用它：

 .hide-not-important  display: none; 

...但问题是：还有其他选择吗？

【问题讨论】：

我认为这是一个非常糟糕的判断调用 Bootstrap 到 have added that 到它的任何属性（至少不使用一些 mixin 让程序员选择是否拥有 !important 标志） .虽然我同意.hide 应该始终隐藏的想法，但!important 假设太多而且太不灵活，不是明智的解决方案。

@ScottS 这也是我的意见...我已经添加了an issue in Bootstrap repository from Github。

【参考方案1】：

您无需编辑原始源代码。只需创建一个样式表并将其放在 Bootstrap 样式表之后并将其添加到其中：

 .hide  display: block !important; 

现在，说了这么多，我会非常小心地这样做。你不知道你的网站上有多少元素应用了这个类，你几乎肯定会得到意想不到的结果。

应用这个类显然是有原因的，我建议：

不要这样做

向元素添加一些其他类并为其添加样式。将您的标记（或使用 js 应用类，如果需要）调整为：

<div class="hide custom-hide-reset"></div>

然后将此样式添加到您创建的样式表中：

.custom-hide-reset  display: none; 

【讨论】：

但这设置了block 值，我希望none 值隐藏元素。

您不想应用 !important，但仍希望应用样式？我不确定我是否理解您最终要达到的目标。 FWIW，没有办法删除 !important 修饰符，它只能被另一个 !important 样式覆盖。

我已经创建了一个自定义类（参见编辑）。还有其他选择吗？

不，一旦 !important 被应用，它只能被覆盖，不能被取消

@Hannes：因为***.com/questions/18851042/…

【参考方案2】：

您可以使用以下命令覆盖它：

 body .hide  display: none !important; 

 .someclass.hide  display: none !important; 

这两个例子的优先级更高

【讨论】：

只有当第二个规则出现在你的 CSS 中的第一个规则之后才会起作用 - 当使用 !important 规则时，特异性也无关紧要。

@Adrift：只要你有多个规则具有相同的属性应用于相同的元素，那么特异性就相关； !important 只是要考虑的另一层优先级。见this answer。在这种情况下，无论顺序如何，.someclass.hide 都会获胜。

啊...是的，我完全错了：[感谢您指出这一点并提供相关答案； +1

@Adrift：不用担心，感谢你有机会重温我的一个旧答案:)

@BoltClock +1 对您链接的两个答案；我很佩服你只有 21 岁。

【参考方案3】：

样式表对象可通过 javascript 访问

var sheets = document.styleSheets

一旦有了样式表数组，就可以遍历规则

var rules = sheets[i].cssRules || sheets[i].rules // browser dependency

每条规则都有一个style 属性，它以通常的方式是可变的。

rule.style[cssPropName] = value;

工作表上有一种方法可以按索引删除规则，deleteRule 或 removeRule，具体取决于浏览器。

最后，您可以找到规则并对其进行编辑或删除并以修改后的形式重新添加。

参考：http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml#.Ujsin4ZmjAs

【参考方案4】：

由于问题可以拆分

如何从应用于我的页面的规则中删除 !important，但是 不改变其值和 不编辑原始 CSS 文件

仅出于纯粹的冒险精神，我认为可以通过以下方式：

用 jQuery 加载 CSS； 通过搜索 .hide display: none !important; 并将其替换为 .hide display: none; 来替换其内容； 将新的内存中更改的 CSS 应用到页面。

考虑到the solution posted in this answer，它可以用一些东西（完全未经测试，只是为了得到这个想法）进行修改，例如：

$.get(myStylesLocation, function(css)

   var alteredCss = css.replace(".hide  display: none !important; ",".hide  display: none; ");
   $('<style type="text/css"></style>')
      .html(alteredCss)
      .appendTo("head");
);

【参考方案5】：

您可以将当前的!important 值替换为另一个类似

.col color:red !important; 
.col color:green;  // wont work
.col color:blue !important;  // will work and set color blue instead of red

DEMO.

更新：

此问题与JavaScript 无关，但作为替代方案，您可以使用这些技术完成任务，使用JavaScript 删除规则，然后再次添加新规则。

function getCs-s-rule(ruleName, deleteFlag)                
   ruleName=ruleName.toLowerCase();                       
   if (document.styleSheets)                             
      for (var i=0; i<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 killCs-s-rule(ruleName)                           
    return getCs-s-rule(ruleName,'delete');                  
                                                         

function addCs-s-rule(ruleName, v)                         
    if (document.styleSheets)                             
        if (!getCs-s-rule(ruleName))                         
            if (document.styleSheets[0].addRule)            
                document.styleSheets[0].addRule(ruleName, v,0);
             else                                          
                document.styleSheets[0].insertRule(ruleName+''+v+'', 0);
                                                            
                                                           
                                                          
   return getCs-s-rule(ruleName);

// Check the rule before deleting
console.log(getCs-s-rule('.col')); // .col  color:red !important; 
// At first remove the current rule
killCs-s-rule('.col');
// Now assign nre rule
addCs-s-rule('.col', 'color: red');
// Check the rule after deleting
console.log(getCs-s-rule('.col')); // .col  color:red; 

DEMO.（来源：Totally Pwn CSS with Javascript）

【讨论】：

@Johnツ，检查更新的答案，不是css，但可能有用。