CSS セレクターを使用して、ID に特定のテキストが含まれ、特定の文字列で終わる要素をターゲットにするにはどうすればよいですか?

部分的なテキストを含む ID の CSS セレクター

ID に基づいて特定の要素をターゲットにする探求では、次のようなシナリオに遭遇する可能性があります。質問で提示されたもの。問題の ID は特定のパターンに従い、目的は、特定のテキストを含み、コロンが続き、「名前」で終わる ID を持つ要素を選択することです。

これを実現するには、で提供される CSS セレクターを使用します。答えは見事に目的を果たしています:

<code class="css">a[id*='Some:Same'][id$='name']</code>

このセレクターの詳細:

• a[id*='Some:Same']: これはすべての を選択します。 ID に「Some:Same」というテキストが含まれる要素。アスタリスク (*) ワイルドカードを使用すると、「Some:Same」の前に任意の文字を出現させることができます。
• [id$='name']: これにより、ID がテキスト「name」で終わるすべての要素が選択されます。ドル記号 ($) ワイルドカードを使用すると、「名前」が ID の最後に表示されます。

角括弧表記を使用して両方の条件を組み合わせると、 のみが選択されます。 ID に「Some:Same」が含まれ、「name」で終わる要素。これは、「someGenerated Some:Same:0:name」や「someGenerated Some:Same:1:name」などの ID を持つ特定の要素を効果的にターゲットにします。

したがって、すべての要素を取得する面倒なアプローチを使用する代わりに、次に、「name」で終わる ID に基づいてそれらをフィルタリングします。この CSS セレクターは、目的の要素を直接選択するクリーンで効率的な方法を提供します。

以上がCSS セレクターを使用して、ID に特定のテキストが含まれ、特定の文字列で終わる要素をターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。