Могу ли я использовать механизм выбора, например, sizzle, для сравнения css-селекторов? - PullRequest
0 голосов
/ 29 октября 2010

Вот моя проблема: я пишу плагин WordPress, который помогает начинающим авторам CSS видеть, как CSS применяется к их темам в режиме реального времени.У него есть множество изящных функций, кроме одной, которая, на мой взгляд, очень важна.

Я хочу позволить им щелкнуть по элементу, увидеть полный путь селектора к этому элементу (эта часть выполнена),а затем покажите им, какие стили в их таблице стилей применимы к нему.

У меня есть полный путь селектора к элементу (например, html body div # page div # post-18.post h2.posttitle), иЯ разбил их таблицу стилей на отдельные селекторы, но не могу найти никакого способа сравнить их.Вот некоторые идеи, которые у меня были:

  1. Используйте jQuery и запустите каждый селектор (в таблице стилей), чтобы увидеть, что он возвращает. Я не сумасшедший об этомпотому что это похоже на огромную потерю производительности, чтобы проверить (потенциально тысячи) селекторов на полную DOM.Кроме того, мне нужно сравнить объекты jQuery, чтобы увидеть, указывают ли они на одно и то же - и основываясь на том, что я читал о сравнении объектов, я не уверен, что это будет прогулкапарк.

  2. Напишите свою собственную простую функцию сравнения и сравните полный путь селектора с селектором css. Я был довольно продан этому, пока не началПодумайте о различных расширенных селекторах:> и т. д.

  3. Используйте sizzle (или аналогичный) или каким-то образом используйте реализацию sizzle в jQuery для простого сравнения селекторов.запускаете эти селекторы против DOM, так что они могут просто сравнивать строки селектора?Как-то?

Я застрял.Любая помощь с благодарностью.

1 Ответ

2 голосов
/ 29 октября 2010

Проверка на равенство в этих сложных структурах (таких как CSS) чрезвычайно трудна (например, вы не можете определить это путем проверки на равные наборы результатов, так как они могут вести себя совершенно иначе при других обстоятельствах). Возможно, вам удастся выяснить это с помощью специфичных для браузера API, если они доступны в JavaScript (например, Firebug отображает таблицы стилей, которые влияют на выбранные элементы). Кроме этого, ваш первый подход является единственным возможным AFAIK.

...