特定のテキストを含む ID を持つ CSS 要素を選択するにはどうすればよいですか?

特定のテキストを含む ID をターゲットとする CSS セレクター

Web 開発では、要素を一意の ID で識別し、スタイルを設定したり操作したりする方法を提供します。特に彼らと一緒に。ただし、要素間で変化する動的部分が ID に含まれている場合、部分的なテキストに基づいて特定の要素にアクセスするのは困難になる可能性があります。

「someGenerated Some:」のような ID を持つ複数のアンカー () 要素があるシナリオを考えてみましょう。同じ:0:名前」および「someGenerated Some:同じ:0:姓」。目標は、テキスト「name」を含む ID を持つ要素のみを取得することです。

1 つのアプローチは、属性セレクター「[id*='Some:Same']」を使用することですが、これではすべての要素が返されます。終了テキストに関係なく、ID に「Some:Same」が含まれる 要素。

代わりに、より正確なセレクターを利用できます。

a[id*='Some:Same'][id$='name']

このセレクターは、効果的に最初に、「[id*='Some:Same']」部分を使用して、「Some:Same」を含む ID を持つ要素をチェックして検索します。次に、「[id$='name']」部分を使用して、ID が「name」で終わる要素のみを含むように結果をさらにフィルタリングします。

この組み合わせセレクターにより、「Some:」を含む ID を持つ要素のみが含まれることが保証されます。 「同じ」かつ「名前」で終わるものが取得されます。この場合、ID が「someGenerated Some:Same:0:name」および「someGenerated Some:Same:1:name」である要素が正常にターゲットになります。

以上が特定のテキストを含む ID を持つ CSS 要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。