3

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

例如：Bootstrap 3 将.hide类定义为：

 .hide { display: none !important; }

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

思考类似的事情

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

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

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

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

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

4

5 回答 5

3

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

 .hide { display: block !important; }

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

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

  1. 不要这样做

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

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

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

    .custom-hide-reset { display: none; }
于 2013-09-19T15:55:54.130 回答
1

您可以使用以下方法覆盖它：

 body .hide { display: none !important; }

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

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

于 2013-09-19T15:55:43.887 回答
1

!important您可以用另一个值覆盖当前值，例如

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

演示。

更新 ：

这个问题不是关于，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; }

演示。（来源：完全 Pwn CSS with Javascript）

于 2013-09-19T15:56:36.740 回答
1

样式表对象可从 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

于 2013-09-19T16:16:37.323 回答
1

由于问题可以拆分为

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

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

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

考虑到这个答案中发布的解决方案，它可以用一些东西（完全未经测试，只是为了得到这个想法）来修改，比如：

$.get(myStylesLocation, function(css)
{
   var alteredCss = css.replace(".hide { display: none !important; }",".hide { display: none; }");
   $('<style type="text/css"></style>')
      .html(alteredCss)
      .appendTo("head");
});
于 2013-09-19T16:28:21.470 回答