CSS选择具有部分id的元素

Question

我有一些用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名称。

我可以使用类似的东西：

#as_{ ... }
#bs_{ ... }

Answer 1

不使用ID选择器，因为它们需要完整的ID名称，但需要substring attribute selectors：

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

但是，既然你的元素有class属性，为什么不为每组元素添加一个公共类，并通过该类选择以使事情变得更简单？您应该能够像使用PHP一样确定分组类，以生成ID。

Answer 2

不确定是否与此问题完全匹配，但我们使用的是 CodeceptJs，为此我们有两个等效的部分：

myLocator: {

// xpath: "//*[contains(@data-testid, 'drawer')]",
css: '[data-testid*="drawer"]',
},

因此，使用 css data-testid*= 而不是 xpath contains 来匹配其 data-testid 命名为类似 drawer-{something_dynamic_appended} 的元素。