4

eコマースストアの静的フレームワークのCSSを編集しています。多くを編集することはできませんが、CSSの特定の要素をターゲットにするためにnth-childを使用しています。問題は、動的に生成されたdiv、テーブル、およびスパンの多くにクラスまたはIDセレクターがないことです。フレームワークはテーブル上に構築されているため、次のようなCSSセレクターがたくさんあります。

.sample_CSS_class table:nth-child(5) table

これは、クラス「sample_CSS_class」を持つdivの下の5番目のテーブルに含まれているテーブルが対象となる場所です。ただし、これにはかなりの時間がかかる場合があります。Google Chrome Inspector(またはFirebug)にアクセスしてソースコードを展開し、そこからカウントダウンする必要があります。非常に多くのコードがあると、間違いを犯す可能性があり、それには少し時間がかかります。

FirebugやGoogleChromeInspector(または他のツール)のような要素のn番目の子の番号を見つける効率的な方法を誰かが知っているかどうか疑問に思いました。ありがとう!

4

1 に答える 1

10

Chromeでは、[ XPathのコピー]コンテキストメニューエントリを使用して、次のような操作を行うことができます。

XPathのもの

次のようなXPathセレクターが表示されます。

//*[@id="sidebar"]/div[4]/div/div[13]

div[13]のようなものdiv:nth-child(13)です。ChromeにCSSのコピーオプションがあれば本当にいいのですが、何らかの理由でそうではありません。多分誰かが延長をするでしょう。

于 2013-02-12T00:30:44.870 に答える