Вот моя проблема: я пишу плагин для WordPress, который помогает начинающим авторам CSS видеть, как CSS применяется к их теме в режиме реального времени. У него есть ряд отличных функций, кроме одной, которая, на мой взгляд, очень важна.
Я хочу позволить им щелкнуть элемент, увидеть полный путь селектора к этому элементу (эта часть выполнена), а затем показать им, какие стили в их таблице стилей применяются к нему.
У меня есть полный путь селектора к элементу (например, html body div#page div#post-18.post h2.posttitle), и у меня есть их таблица стилей, разобранная на отдельные селекторы, но я не могу понять, как это сделать. сравните два. Некоторые идеи, которые у меня были:
Используйте jQuery и запустите каждый селектор (в таблице стилей), чтобы посмотреть, что он возвращает. Я не в восторге от этого, потому что кажется, что проверка (возможно, тысяч) селекторов на полный ДОМ. Вдобавок ко всему, мне нужно сравнить объекты jQuery, чтобы увидеть, указывают ли они на одно и то же, и, основываясь на том, что я прочитал о сравнении объектов, я не уверен, что это будет прогулка. парк.
Напишите свою собственную простую функцию сравнения и сравните полный путь селектора с селектором CSS. Я был очень увлечен этим, пока не начал думать о различных расширенных селекторах — : > и т. д.
Используйте sizzle (или что-то подобное) или каким-то образом используйте реализацию sizzle в jQuery, чтобы просто сравнить селекторы. Они запускают эти селекторы в DOM, так что наверняка у них есть возможность просто сравнивать строки селекторов? Как-то?
Я застрял. Любая помощь приветствуется.
