如何选择 ID 包含特定文本的 CSS 元素？

CSS 选择器定位包含特定文本的 ID

在 Web 开发中，可以使用唯一的 ID 来标识元素，从而提供一种设计样式和交互的方式专门与他们一起。但是，当 ID 包含跨元素更改的动态部分时，基于部分文本访问特定元素可能会具有挑战性。

考虑这样的场景：您有多个锚点 () 元素，其 ID 类似于“someGenerate Some:相同：0：姓名”和“某些生成的一些：相同：0：姓氏。”您的目标是仅获取 ID 包含文本“name”的元素。

一种方法可能是使用属性选择器“[id*='Some:Same']”，但这会返回所有 ID 包含“Some:Same”的元素，无论结尾文本如何。

相反，您可以使用更精确的选择器：

a[id*='Some:Same'][id$='name']

此选择器有效地缩小了范围首先使用“[id*='Some:Same']”部分检查 ID 包含“Some:Same”的元素进行搜索。然后，它使用“[id$='name']”部分进一步过滤结果，仅包含 ID 以“name”结尾的元素。

此组合选择器确保仅包含 ID 包含“Some:检索到“相同”并以“名称”结尾。在这种情况下，它将成功定位 ID 为“someGeneerated Some:Same:0:name”和“someGenelated Some:Same:1:name”的元素。

以上是如何选择 ID 包含特定文本的 CSS 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！