您可以使用 CSS 按部分 ID 值选择元素吗？

使用 CSS 通过部分 ID 值选择元素

在 CSS 领域，精确识别元素至关重要。这个问题深入探讨了不通过完整 ID 值而是通过部分匹配来选择元素的可能性。

具有不完整 ID 的 PHP 生成的元素

问题源于 PHP 生成的元素部分 ID 值。例如：

<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>

虽然类属性按共性对元素进行分组，但由于 ID 名称不完整，单独选择它们的需要构成了挑战。

与 CSS 的部分 ID 匹配

不幸的是，CSS ID 选择器需要完整的 ID 值，使得 #as_{ ... } 和 #bs_{ ... } 等建议无效。

属性子字符串选择器：替代方案

属性子字符串选择器提供了一种替代方法：

div[id^="as_"]
div[id^="bs_"]

这些选择器匹配 ID 值以指定字符串开头的元素。然而，如果其他元素在其 ID 中共享相似的前缀，依赖此方法可能会导致意想不到的后果。

使用类的实用解决方案

考虑到类属性的存在，一个更简单的解决方案包括为每组元素分配一个公共类，并通过该类通过 CSS 定位它们。类名称可以源自负责生成 ID 的 PHP 逻辑。这种方法简化了选择过程，同时保持了所需的特异性。

以上是您可以使用 CSS 按部分 ID 值选择元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！