如何通过部分ID值选择CSS中的元素？

gtlvzcf8 于 2023-04-23 发布在其他

关注(0)|答案(2)|浏览(148)

我有一些用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_{ ... }

2条答案

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

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

但是既然你的元素都有一个class属性，为什么不给每个元素组添加一个公共类，然后按这个类进行选择，这样会让事情变得更简单呢？你应该能够像生成ID一样，使用PHP来确定分组类。

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

myLocator: {

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

因此，使用data-testid*=作为css而不是contains作为xpath，以便匹配data-testid名为drawer-{something_dynamic_appended}的元素。