javascript - 检查CSSRule是否与Element匹配

Question

有没有办法检查CSS选择器（由document.styleSheets[666].rules[1984].selectorText获得）是否与特定元素匹配？

我要求一个跨浏览器的纯JavaScript解决方案，但我会考虑使用jQuery，如果只是简单地完成它。

Answer 1

对于现代浏览器，有matchesSelector。对于不太现代的浏览器，您可以使用querySelectorAll和walk the DOM。

不要使用jQuery。 Sizzle就足够了。

Sizzle.matchesSelector(element, selector)

https://github.com/jquery/sizzle/wiki/Sizzle-Documentation

Answer 2

搜索特定的CSS规则

以下示例在样式表中搜索“a：hover”规则，如果找到，则返回对它的引用：

var mysheet=document.styleSheets[0]
var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules
for (i=0; i<myrules.length; i++){
if(myrules[i].selectorText.toLowerCase()=="a:hover"){ //find "a:hover" rule
targetrule=myrules[i]
break;
}
}

参考：http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Answer 3

在jQuery中非常简单：

$(element).is(cssSelector);