Question

可以从CSS选择器中获取一个重要的属性值吗？

例如：Bootstrap 3 defines .hide class as：

 .hide { display: none !important; }

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

在某事上思考

 .hide { display: none !remove-important; }

请注意，我想保持相同的价值！我不想将block !important设置为.hide课程，因为这不正确...

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

 .hide-not-important { display: none; }

......但问题是：有没有替代方案？

Answer 1

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

 .hide { display: block !important; }

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

显然有一个原因是这个课程已被应用，我建议：

不要这样做
在元素中添加一些其他类并为其添加样式。调整你的标记（或者如果需要，使用js来应用这个类），如：
```
<div class="hide custom-hide-reset"></div>
```
然后将此样式添加到您创建的样式表中：
```
.custom-hide-reset { display: none; }
```

Answer 2

您可以使用以下方式覆盖此内容：

 body .hide { display: none !important; }

 .someclass.hide { display: none !important; }

这两个例子具有更高的优先级

Answer 3

您可以通过另一个值覆盖当前的!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 getCSSRule(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 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; }

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

Answer 4

可以从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

Answer 5

因为问题可以在

中拆分

如何从应用于我的网页的规则中删除!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");
});

是否可以从CSS选择器中获取一个重要的属性值？

5 个答案:

更新：