css - 如何绕过覆盖的 CSS 声明

Question

更新：请在下面查看我的答案

我试图在 a 上使用第一个.alertCSS 声明中的属性，div 即使第一个声明被后续声明覆盖。

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 继承是不可能的。我需要做两件事之一来获得最初由第一个声明应用的样式：

1. 使第一个声明更具体或 !important
2. 用第三个声明覆盖第二个声明

这似乎是 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];