当你只知道部分 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中文网其他相关文章！