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

Question

首先,我知道 CSS表达式在很多方面都是失效的,也是为了避免!important在可能的情况下使用.这是一个特殊的案例样式表.

简而言之

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

例如,这不起作用:

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

[编辑:感谢MarmaladeToday下面的评论].这也行不通:

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

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

---

详细地

我实际上要做的是模仿inheritIE6和7中的值.这有效:

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

但我也想设置!important标志,这不起作用:

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

我知道,在JavaScript中,不可能!important通过元素的style对象进行设置.例如,这不起作用:

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

但是,它是可以设置!important通过元素的style 属性:

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

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

---

开始赏金

到目前为止还没有可靠的答案,所以我开始获得赏金.

理想情况下,我正在寻找一个基于CSS的模拟inherit !importantIE6和IE7 的解决方案,无论是否有CSS表达式.(请在发布前验证您的建议是否有效).

至少,一些权威参考的链接告诉我这是不可能的,这意味着我可以将这一思路放在一边 - 我没有看到任何提及CSS !important规则与规则的使用.

Answer 1

这些 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）。所以它相当于 JScript 中的!important.

另请注意，我filter也在重置属性本身。这可以防止表达式被不断地重新计算。尽管这可能会降低性能，但我认为这并不是非常重要。我把它放在这里的主要原因是因为我alert()在这些表达式中添加了 s，并且您肯定不希望这些表达式永远弹出。

事实上，也可以使用您创建的任何其他属性。这也有效：

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

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