!important 规则可以用在 IE 的 CSS 表达式中吗？

Question

首先，我知道 CSS 表达式在很多方面都已失效和错误，并且尽可能避免使用!important。这是special case stylesheet。

简而言之

我的问题是...... CSS 表达式有没有办法设置!important 标志？

例如这不起作用：

a { color:expression('red !important'); }

[编辑：感谢 MarmaladeToday 下面的评论]。 这也不起作用：

a { color:expression('red') !important; }

这可以通过其他方式完成吗？

---

详细说明

我实际上想要做的是模仿 IE6 和 7 中的 inherit 值。这行得通：

color:expression(
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
    );

但我也想设置!important 标志，而这不起作用：

color:expression(
  (
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
  ) + ' !important');

我知道，在 JavaScript 中，无法通过元素的 style 对象设置 !important。例如。 这行不通：

element.style.color = 'red !important';

但是，是可以通过元素的style 设置!important 属性：

element.setAttribute('style', 'color:red !important;');

所以... CSS 表达式是否仅限于与 style 对象交互，因此，我想要实现的目标是不可能的 - 或者表达式有什么方法可以影响元素的属性，或者传递 !important以其他方式？

---

开始赏金

到目前为止还没有可靠的答案，所以我开始赏金了。

理想情况下，我正在寻找一种基于 CSS 的解决方案，用于在 IE6 和 IE7 中模拟 inherit !important，无论是否使用 CSS 表达式。 （请在发布之前验证您的建议是否有效）。

至少，一些权威参考的链接告诉我这是不可能的，这意味着我可以放下这个思路——我还没有看到任何提到使用 !important 规则的 CSS 表达式。

Answer 1

color:expression('red') !important;

Answer 2

据我了解， !important 近来主要是一种黑客行为...特别是因为 IE 无法识别它。

Answer 3

这听起来很恶心，但是：

color: expression((function (_this) {
    window.setTimeout(function () {
        _this.setAttribute("style", "color:" +
            (_this.parentNode.currentStyle ?
                _this.parentNode.currentStyle.color : 'red') + " !important";
    }, 0);
    return _this.parentNode.currentStyle ?
        _this.parentNode.currentStyle.color : 'red';
})(this));

换句话说，这个：

1. 立即返回"red"（或父颜色）。
2. 设置一个超时，该超时将在之后立即设置"red !important"（或其他）。

请记住，这最终可能会占用您的浏览器。我没有测试它，涉及 CSS 表达式的东西往往会出错。

Answer 4

你可以试试the behavior property，它比表达式更通用。

试试这个，

继承.htc：

<SCRIPT language="JScript">
    //add your own inheritance logic here, you can use element.parentNode etc.
    var prop = element.currentStyle.behaviorProp;//specified in stylesheet
    var val = element.currentStyle.behaviorValue;//specified in stylesheet
    element.style[prop] = val;//set as inline style, you can also use setAttribute here.
</SCRIPT>

css:

body #div1 {
    color:blue;
}

#div1 {
    color:red;/*stays blue, because 'body #div1' is more specific*/
    behaviorProp:color;/*specify styleproperty for the .htc*/
    behaviorValue:green;/*WILL become green, because the .htc sets it as an inline style, which has priority.*/
    behavior:url(inherit.htc);
}

Answer 5

quirksmode 的古老 ppk 在 CSS、JavaScript 和 !important 关键字方面做了一些工作。 （请注意，在 Firefox 或任何其他非 IE 浏览器中进行测试时，请使用cssRules 而不是下面的rules。

这是链接：W3C DOM Compatibility

您显然可以通过这样做来阅读样式表中的样式规则是否重要（这将获得第二个样式表中第二个 css 规则中颜色属性的重要性级别，在所有浏览器中，除了 MICROSOFT INTERNET EXPLORER . 真是个无赖。

document.styleSheets[1].rules[1].style.getPropertyPriority('color')
//Returns important when the style is marked !important.
//Returns an empty string otherwise.

现在，他的研究揭示了另一种设置 !important 的方法，不幸的是，这显然也只适用于非 Internet Explorer 浏览器

// where x is a DOM element
x.style.setProperty('color','#00cc00','!important');
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00','!important');

显然这种奇怪的语法，如果你不设置为!important，需要将第三个参数设置为null：

// where x is a DOM element
x.style.setProperty('color','#00cc00',null);
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00',null);

现在，MSDN 有一个名为“cssText”的属性，它悬挂在 DOM 元素的 style 对象上。它甚至表明 CSS 表达式是可以的。用法是：

x.style.cssText = 'color: #00cc00 !important';

现在，这可能很重要（呵呵），MSDN 页面说（强调我的）：

可以使用 DHTML 表达式代替前面的值。 如 Internet Explorer 8 的表达式 在 IE8 模式下不支持。为了 更多信息，请参阅About Dynamic Properties。

也值得一试ppk's tests of cssText。

很遗憾，这台笔记本电脑上没有可用的 Windows Microsoft Internet Explorer 的相关版本，但也许这有点用处。我很好奇这是如何摆脱的，这是我遇到的问题（在 JavaScript 中设置 !important）但找到了其他方法来解决它，通常只是在类中移动或通过在相关选择器中使用 ID 来应用特异性.

祝你有个有趣的问题好运！

Answer 6

这些 CSS 表达式不起作用的原因是 IE 只计算级联中最后一个属性的表达式。

例如如果你有一个 HTML 文档，里面有一个链接和下面的“CSS”，

a {
    color: expression(function(e){
        alert('success');
        e.runtimeStyle.color = 'blue';
    }(this));
}
a { color: red; }

您将永远不会看到该警报（更不用说样式更改），因为从未计算过 CSS 表达式。所以不，您不能使用表达式来设置 !important 标志。

也就是说，不是当您尝试将其设置在同一属性上时。你可以作弊。但这确实让表达式有点复杂：

a {
    filter: expression(function(e){
        e.runtimeStyle.color = 'blue';
        alert('success');
        e.style.filter = '';
    }(this));
}
a { color: red; }

这里有几点需要注意。

如果您只是使用另一个 CSS 属性，则可以确定表达式 将 被计算。或者至少，更确定一点，因为如果在级联的更下方有另一个规则已经使用相同的属性，那么你仍然不走运。

其次，您必须使用runtimeStyle 而不是currentStyle。如果你在这里使用currentStyle，第二条规则最终还是会覆盖它。 runtimeStyle 覆盖所有其他 CSS（!important 声明除外）。所以它是 !important 的 JScript 等价物。

另请注意，我也在重置 filter 属性本身。这可以防止表达式被不断地重新评估。但是，尽管这可能会降低性能，但我认为这不是超级关键。我把它放在这里的主要原因是因为我在这些表达式中添加了alert()s，而你绝对不想让它们永远弹出。

实际上也可以使用您制作的任何其他属性。这也有效：

a {
    bogus: expression(function(e){
        e.runtimeStyle.color = 'blue';
    }(this));
}

但是，由于bogus 属性实际上并不存在，因此您无法使用 Javascript 对其进行重置，因此此将不断地重新评估。