0

これが私の問題です。私は、新進の CSS 作成者が CSS が自分のテーマにどのように適用されるかをリアルタイムで確認できるようにする WordPress プラグインを作成しています。それは私の心の中で非常に重要な1つを除いて、たくさんの気の利いた機能を持っています.

要素をクリックして、その要素への完全なセレクター パスを表示し (その部分は完了)、スタイルシートのどのスタイルがそれに適用されるかを表示できるようにしたいと考えています。

要素への完全なセレクター パス (たとえば、html body div#page div#post-18.post h2.posttitle) があり、スタイルシートが個々のセレクターに解析されていますが、方法がわかりません。 2つを比較します。私が持っていたいくつかのアイデア：

  1. jQuery を使用し、(スタイルシート内の) すべてのセレクターを実行して、何が返されるかを確認します。 完全な DOM に対して (数千の可能性がある) セレクターをチェックするのは、パフォーマンスに大きな負荷がかかるように思えるので、私はこれに夢中ではありません。その上で、jQuery オブジェクトを比較して、それらが同じものを指しているかどうかを確認する必要があります。オブジェクトの比較について読んだ内容に基づいて、ウォークインになるかどうかはわかりません。公園。

  2. 独自の単純な比較関数を作成し、完全なセレクター パスを CSS セレクターと比較します。 さまざまな高度なセレクターについて考え始めるまで、私はこれにかなり納得していました - : > など。

  3. シズル (または同様のもの) を使用するか、何らかの方法で jQuery のシズルの実装を使用して、セレクターを比較します。 彼らは DOM に対してこれらのセレクターを実行しているので、セレクター文字列を比較するだけの能力を持っているのでしょうか? 何とかして？

私は立ち往生しています。どんな助けでも大歓迎です。

4

1 に答える 1

2

その複雑な構造（CSSなど）の同等性をチェックすることは非常に困難です（たとえば、他の状況ではまったく異なる動作をする可能性があるため、同等の結果セットをテストしてこれを判断することはできません）。JavaScriptで利用可能な場合はブラウザ固有のAPIを使用してこれを理解できる可能性があります（たとえば、Firebugは選択した要素に影響を与えるスタイルシートを表示します）。それを除けば、あなたの最初のアプローチは唯一の可能な唯一のAFAIKです。

于 2010-10-29T13:20:31.763 に答える