使用 CSS 选择器定位动态 CSS 元素

Question

我正在使用名为 Stonly 的产品来放置工具提示。在那里，我们将使用 CSS 选择器找到 HTML 元素来识别工具提示。根据用户的输入，他们将获得一个动态任务列表。我正在尝试为特定任务定位一个元素，当特定任务的位置可能是基于一个用户输入的第 26 个任务，或基于不同输入的第 25 个任务。每个任务都有一个关联的唯一数据元素

例如

<a data-beacon-article-modal="5ffe3f6fc64fe14d0e1fa33f">Follow-up with your Lender.</a>

当我使用 CSS 选择器时

这是一个用户输入的样子（此任务是列表中的第 26 个任务）

#root > div:nth-child(3) > div > div.container > div > div > div > div:nth-child(26) > div.accrd-cont > p:nth-child(1) > a

这是我稍微更改输入时的选择器（任务成为列表中的第 25 个任务，因此“div:nth-child(25)”。

#root > div:nth-child(3) > div > div.container > div > div > div > div:nth-child(25) > div.accrd-cont > p:nth-child(1) > a

问题： 如果我知道我正在寻找 data-beacon-article-modal="5ffe3f6fc64fe14d0e1fa33f" 的位置，无论是第 25 个还是第 26 个 html 元素，我的 CSS 上面的选择器看起来像什么？

我试图将 div:nth-child(26) 更改为 div，但没有成功。例如

#root > div:nth-child(3) > div > div.container > div > div > div > div > div.accrd-cont > p:nth-child(1) > a[data-beacon-article-modal*="5ffe3f6fc64fe14d0e1fa33f"]

Answer 1

如果您知道该数据属性是唯一的，请简单地尝试：

 a[data-beacon-article-modal="5ffe3f6fc64fe14d0e1fa33f"]

参见示例：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

The CSS attribute selector matches elements based on the presence or value of a given attribute.

如果它是唯一的，则您不需要表达直接返回到根的选择器。

使用 CSS 选择器定位动态 CSS 元素

Locating Dynamic CSS Elements using CSS Selector

html

css

element