Как получить все определенные CSS-селекторы для данного элемента DOM?

Question

Как получить все ОПРЕДЕЛЕННЫЕ селекторы CSS для данного элемента DOM, используя jQuery?

Под определенным я подразумеваю все селекторы CSS, которые используются в любой из таблиц стилей, примененных к document.

В некотором смысле это похоже на функцию, реализованную FireBug, где в нем показаны все примененные селекторы CSS для выбранного элемента DOM.

Любая помощь приветствуется.

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>");
        }
    }
}

Учитывая следующий дом:

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

Answer 2

Я думаю, что эти две функции не похожи.

Кроме того, я думаю, что ни jQuery, ни браузер не отслеживают селекторы, используемые в коде javascript или файле таблицы стилей; Селекторы используются для ссылки на один или несколько элементов DOM, чтобы в итоге применить к ним стили.

Таким образом, сохраняются стили, а не используемые селекторы.

Надеюсь, это поможет.