當你只知道部分 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中文網其他相關文章！