javascript - IE 中不显眼的伪类和属性选择器模拟

Question

我正在尝试在 Internet Explorer 6 和 7 中模拟一些伪类和属性选择器，例如 :focus、:hover 或 [type =文本]。到目前为止，我已经成功地为受影响的元素添加了一个类名:

$("input, textarea, select")
.hover(function(){
    $(this).addClass("hover");
}, function(){
    $(this).removeClass("hover");
})
.focus(function(){
    $(this).addClass("focus");
})
.blur(function(){
    $(this).removeClass("focus");
});

$("input[type=text]").each(function(){
    $(this).addClass("text");
});

但是，我仍然被迫在样式表中复制选择器:

textarea:focus, textarea.focus{
}

而且，更糟糕的是，IE6 在找到属性时似乎忽略了所有选择器:

input[type=text], input.text{
    /* IE6 ignores this */
}

当然，IE6 会忽略具有多个类的选择器:

input.text.focus{
    /* IE6 ignores this */
}

所以我很可能会遇到这样的烂摊子:

input[type=text]{
    /* Rules here */
}
input.text{
    /* Same rules again */
}
input[type=text]:focus{
}
input.text_and_focus{
}
input.text_and_hover{
}
input.text_and_focus_and_hover{
}

我的问题:有没有办法读取为CSS选择器定义的规则或计算样式并将其应用于某些元素，因此我只需要维护一套标准CSS？

Answer 1

如果您的样式已经依赖于 javascript(否则，:focus 或 .focus 都不能在 IE6 中工作)，我建议您使用 IE7.js by Dean Edwards，js-enhance ie6.

http://code.google.com/p/ie7-js/