jQuery 获取 CSS 中指定的元素类

Question

我知道 Attr 获取元素的确切类。有没有办法获得 CSS 中定义的元素的确切类？例如，一个元素可能具有“title”类，但在 CSS 中定义为后代选择器，例如: .other-list .title {}我需要一些东西来获得确切的类值。您可以在这里看到完整的示例: http://jsfiddle.net/2TMgQ/2/

单击时，两个元素都具有“title”类，但在 CSS 中定义为两个不同的元素。谢谢

Answer 1

这应该会为您提供适用于该元素的所有 CSS 样式。它使用 jQuery 的 is 函数来检查 CSS 规则选择器是否适用于给定元素。迭代 document.styleSheets 中的所有样式表，以及每个样式表中的所有 cssRules，并检查 selectorText 是否与该元素匹配。在伪代码中:

given::element

matchedRules = []

for styleSheet in document.styleSheets
    for rule in styleSheet.cssRules
        if element.is(rule.selectorText)
            matchedRules.push(rule.selectorText)

return matchedRules;

在代码中:

function getCSSRules(element) {
    element = $(element);

    var styleSheets = document.styleSheets;
    var matchedRules = [], rules, rule;

    for(var i = 0; i < styleSheets.length; i++) {
        rules = styleSheets[i].cssRules;

        for(var j = 0; j < rules.length; j++) {
            rule = rules[j];
            if(element.is(rule.selectorText)) {
               matchedRules.push(rule.selectorText);
            }
        }
    }

    return matchedRules;
}

这应该返回适​​用于该元素的所有规则。为您first example ，它返回:

[".links-list .title"]

尼克的extended example ，它返回:

[".links-list .title", ".title", "a", "li a"]

如何定义特异性以及如何决定从此列表中过滤掉哪些内容取决于您。