ID の一部しか分からない場合に CSS で要素を選択する方法

部分 ID 値による CSS の要素の選択

Web 開発では、スタイル設定や操作の目的で特定の識別子を持つ要素を選択することが必要になります。 。しかし、要素の ID の一部しかわかっていない場合はどうすればよいでしょうか?

課題:

要素が PHP で動的に生成され、一意の ID が割り当てられているシナリオを考えてみましょう。プレフィックスを含むもの:

<code class="html"><div class="1" id="as_1">...</div>
<div class="2" id="bs_1">...</div>

<div class="1" id="as_2">...</div>
<div class="2" id="bs_2">...</div></code>

ID 全体を知らなくても、これらの要素を個別に選択する必要があります。

ID セレクターの制限:

• ID セレクターでは、要素を選択するには完全一致が必要です。

• 使用法:

  <code class="css">#as_{ ... }
  #bs_{ ... }</code>

  代替解決策: 部分文字列属性セレクター:

ID セレクターはこのシナリオには適していませんが、部分文字列属性セレクターを使用できます。

<code class="css">div[id^="as_"]
div[id^="bs_"]</code>

• [id^="as_"] はすべての要素を選択しますID が「as_」で始まるもの。
• [id^="bs_"] は、ID が「bs_」で始まるすべての要素を選択します。

追加の提案:

要素にすでにクラス属性がある場合は、各グループに共通のクラスを割り当て、代わりにそのクラスで選択することを検討してください。これによりプロセスが簡素化され、選択が PHP で使用される ID 生成方法から独立したものになります。

以上がID の一部しか分からない場合に CSS で要素を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。