如何为给定的DOM元素获取所有定义的CSS选择器？

如何使用jQuery获取给定DOM元素的所有DEFINED CSS选择器？

定义中，我指的是应用于document任何样式表中使用的所有CSS选择器。

在某种程度上，这类似于FireBug实现的function，其中显示了所选DOM元素的所有应用CSS选择器。

任何帮助表示赞赏。

Answer 1

从这个答案中，您可以通过循环遍历cssRules属性来获得所需内容。

 var myElement = $("#content"); for (var x = 0; x < document.styleSheets.length; x++) { var rules = document.styleSheets[x].cssRules; for (var i = 0; i < rules.length; i++) { if (myElement.is(rules[i].selectorText)) { $("ul").append("
" + rules[i].selectorText + "
"); } } } 

鉴于以下dom：

和css规则：

 div { background-color:black; } #content{ height:50px; width:50px; } div > div { border: solid 1px red; } 

我们将得到一个匹配的规则集：

 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,fieldset, input, textarea, p, blockquote, th, td div #content div > div 

关于jsfiddle的例子 。 不确定这对于所有场景的效果如何，但如果它符合您的需求可能需要考虑。

更新了稍微更完整的示例 ……

 $(document).click(function(event) { var rules = GetAppliedCssRules($(event.target)); var $ul = $("#rules").empty(); $.each(rules, function() { $ul.append("
" + this + "
"); }); event.preventDefault(); }); function GetAppliedCssRules($element) { var appliedRules = []; for (var x = 0; x < document.styleSheets.length; x++) { var rules = document.styleSheets[x].cssRules; for (var i = 0; i < rules.length; i++) { if ($element.is(rules[i].selectorText)) { appliedRules.push(rules[i].selectorText); } } } return appliedRules; } 

Answer 2

我认为这两个function并不相似。

此外，我认为jQuery和浏览器也不会通过javascript代码或样式表文件保留选择器的跟踪; 选择器用于引用一个或多个DOM元素，以最终将样式应用于它们。

因此，保留的是样式，而不是使用的选择器。

希望这可以帮助。