私はグーグルで検索しましたが、満足のいく答えが見つかりませんでした。
コンソールで JavaScript を使用するのと同じ方法で、CSS セレクターをブラウザーでライブで実行する方法はありますか?
Styles ペインで CSS を変更できることはわかっていますが、:first-of-type などの疑似セレクターを追加できないようです。また、影響を受けるすべてのタグや、セレクターによって返されるタグ セットが表示されるわけではありません。
section.blah:first-of-type返された要素または影響を受けた要素を実行して確認する方法はありますか?
現在、Chrome のみを使用していますが、この機能があれば FF などを使用できます。
[要素] タブでは、セレクター構文で検索できます。
検索すると
.myclass
class="myclass" を持つ要素が見つかります
これがあなたが求めていることに最も近いと思います
要素タブに移動し、ctrl+F (検索) を押します。以下の例では、div.answer と入力します。
検索文字列の右側に、3 つの要素が条件を満たしたことを示す "1 of 3" が表示されます。現在のものが強調表示されます。矢印でアイテムを上下に移動できます。
実際には、スタイル ペインを編集するだけでそれを行うことができます。最初に親を選択する必要があります(私の場合はhtml)。
結果は次のとおりです。
このように、クロムはすべての愛情を即座に示します。DOM ツリーをハイライトするだけではありません。
ページで jQuery を使用している場合は、次のことができます。
$("section.blah:first-of-type");
ブラウザ コンソールでそれを実行すると、jquery が一致した要素のリストが表示されます。
さらに良いことに、それを変数に割り当てて、プログラムでトラバースできます。