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

Question

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

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

从某种意义上讲，这类似于FireBug实现的功能，在其中它显示了所选DOM元素的所有应用CSS选择器。

感谢任何帮助。

- GeekTantra

---

这听起来更合理...不知道是否可能仅使用JS / jQuery实现。 - BoltClock

你的另一个问题[（https://dev59.com/SVTTa4cB1Zd3GeqPvLoU）]怎么样了？它仍然相关吗？ - Gumbo

听起来你是想找到元素的计算样式，而不是它的“定义选择器”。 - Matt Ball

@Matt Ball：我并不是特别关心计算样式，我更关心获取选择器。 - GeekTantra

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("<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的示例。不确定它是否适用于所有情况，但如果符合您的需求，可能值得一看。

更新：使用稍微更完整的示例...

$(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;
}

- Mark Coleman

---

这个返回的 appliedRules 是否按照在 DOM 中应用的优先级顺序返回，就像 FireBug 一样？ - GeekTantra

这只会告诉你样式表中的某个规则与你的元素匹配，而不是它们被应用的优先级。如果你想找出一个元素的最终样式，可以使用 getComputedStyle。 - Mark Coleman

@Mark，你知道如何按照CSS优先级对选择器进行排序吗？我看到Firebug Lite按照CSS优先级排序，但我不知道他们是如何做到的。 - Codler

+1 表示这个解决方案的想法非常清晰，易于立即实现。 - L. Monty

我得到了 无法从'CSSStyleSheet'读取'cssRules'属性：无法访问规则 的错误。如何跳过外部CSS？ - brauliobo

另外，如何在没有jQuery的情况下执行$element.is？ - brauliobo

Answer 2

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

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

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

希望这可以帮助到您。

- Luca Fagioli