html - 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_{ ... }

score 85 · Accepted Answer

不使用 ID 选择器，因为它们需要完整的 ID 名称，而是使用子字符串属性选择器：

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

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

score 1 · Accepted Answer

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

myLocator: {

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

因此，使用data-testid*=for css 而不是 contains for xpath 以匹配其 data-testid 名为drawer-{something_dynamic_appended}.

2 回答 2