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

Question

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

定义的意思是在应用于document的任何样式表中使用的所有CSS选择器。

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

感谢任何帮助。

Answer 1

我认为这两个功能并不相似。

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

所以，它保留的是样式，而不是使用的选择器。

希望这会有所帮助。

Answer 2

从这个answer 中，您可以通过循环访问 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("<li>" + rules[i].selectorText + "</li>");
        }
    }
}

给定以下 dom：

<div>
    <div id="content">
    </div>
</div>

和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 上的示例。不确定这对所有场景的效果如何，但如果它符合您的需求，可能需要考虑一下。

更新更完整的example...

$(document).click(function(event) {
    var rules = GetAppliedCssRules($(event.target));
    var $ul = $("#rules").empty();
    $.each(rules, function() {
        $ul.append("<li>" + this + "</li>");
    });
    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;
}