Question

更新：请参阅下面的答案

我正在尝试使用.alert 上第一个div CSS声明中的属性，即使第一个声明被后续声明覆盖。

CSS

.alert{ margin:10px; } // one.css
.alert{ margin:0; } // two.css

HTML

<div class="alert">Hello!</div>

你知道我是否有办法处理这种情况而不必创建另一个声明来覆盖two.css中的声明？

我搜索了谷歌和SO，但我无法找到解决方案。

编辑：如果我发出第一个声明!important或增加其特异性，那么我将打破使用第二个.alert声明。所以不幸的是，这不是一个选择。

Answer 1

使用!important。

.alert{ margin:10px !important; } // one.css
.alert{ margin:0; } // two.css

或者使声明比two.css更具体。或者在one.css之后加载two.css。

Answer 2

在类名之前引用父ID选择器，以使该类属性占据主导值。如果您没有父ID，请创建一个。您不必继续使用！important，因为在每种情况下都无法正常工作。

像这样......

#parent .alert { margin:10px;}

Answer 3

根据普遍的共识，绕过CSS继承是不可能的。我需要做两件事之一来获得第一个声明最初应用的样式：

使第一个声明更具体或更重要
使用第三个

这似乎是CSS中不良练习的情况，因此如果您遇到类似问题，请花点时间考虑一下您设置样式表的方式。

我将尝试以另一种方式解决自己的情况，如果我有任何有价值的东西要分享，或许我会回来提供更多信息。

Answer 4

您将获得第一个应用于元素的CSS规则并进行存储，然后再获取计算值并进行比较。如果值不相同，则可以将元素设置为原始值。

这是一个遍历CSS规则并获取您指定样式的值的函数。您将必须对其进行修改以包括类（当前它通过ID进行检查）并保存原始声明。

您还可以仅使用要包含的值创建一个新规则，并将其应用于特定元素。

function getCSSPropertyValueForElement(id, property) {
    var styleSheets = document.styleSheets;
    var numOfStylesheets = styleSheets.length;
    var values = [];
    var selectorText = "#" + id;
    var value;

    for(var i=0;i<numOfStylesheets;i++) {
        var styleSheet = styleSheets[i];
        var cssRules = styleSheet.cssRules;
        var numOfCSSRules = cssRules.length;
        var cssRule;

        for (var j=0;j<numOfCSSRules;j++) {
            cssRule = cssRules[j];

            if (cssRule.media) {
                var mediaRules = cssRule.cssRules;
                var numOfMediaRules = mediaRules ? mediaRules.length : 0;

                for(var k=0;k<numOfMediaRules;k++) {
                    var mediaRule = mediaRules[k];

                    if (mediaRule.selectorText==selectorText) {

                        if (mediaRule.style && property in mediaRule.style) {
                            value = mediaRule.style.getPropertyValue(property);
                            console.log(property+":" + value);
                            values.push(value);
                        }
                    }
                }
            }
            else {

                if (cssRule.selectorText==selectorText) {
                    if (cssRule.style && property in cssRule.style) {
                        value = cssRule.style.getPropertyValue(property);
                        console.log(property+":" + value);
                        values.push(value);
                    }
                }
            }
        }
    }

    return values.pop();
}

var property = "outline";
// getting the computed value / current value
var value = window.getComputedValue(element, "stylenamedoesntwork").style[property];

如何绕过重写的CSS声明

4 个答案: