我可以在 queryselector() 中为 CONTAINS 使用属性选择器吗?

我想根据 href 属性的子字符串选择一个元素.

我最近发布了一个问题，我收到了一个基于开始于"的答案:

document.querySelector('#utility-menu a[href^="/email_check?lang="').textContent.trim();

但实际上，从一个页面到另一个页面的唯一常量是 href 属性中的 "lang=".所以 /email_check? 是特定于页面的，所以我不能在所有页面上使用这个变量.

是否可以修改我的选择器以返回任何 <a> 元素的 textContent，其中包含子字符串 "lang="?

解决方案

所有 CSS 选择器都记录在 MDN 并在 W3C CSSWG 选择器级别 4 概述中指定¹ (存档链接).

你需要的是

#utility-menu a[href*="lang="]

<块引用>

<头>

模式	代表
E[foo*=bar"]	一个 E 元素，其 foo 属性值包含子字符串 bar.

---

¹:CSSWG 目前的 CSS 选择器模块工作是选择器级别 4.并非所有浏览器都支持其所有功能.4 级草案包括从 1 级到 4 级的所有内容.观看级别"表列.今天的浏览器至少支持 Level 3，但请查看 兼容性表在 MDN 上确定.

I would like to select an element based on a substring of href attribute.

I posted a question recently where I received an answer based on "starts with":

document.querySelector('#utility-menu a[href^="/email_check?lang="').textContent.trim();

But actually, the only constant from page to page will be "lang=" within the href attribute. So /email_check? is page specific so I cannot use this variable on al pages.

Is it possible to modify my selector to return the textContent of any <a> element with the substring "lang=" within it?

解决方案

All CSS selectors are documented on MDN and specified in the W3C CSSWG Selectors Level 4 overview¹ (Archived link).

The one you need is

#utility-menu a[href*="lang="]

Pattern	Represents
E[foo*="bar"]	An E element whose foo attribute value contains the substring bar.

---

¹: The CSSWG’s current work of the CSS Selectors Module is Selectors Level 4. Not all of its features are supported in all browsers. The Level 4 draft includes everything from Level 1 to Level 4. Watch the "Level" table column. Today’s browsers support at least up to Level 3, but check the compatibility tables on MDN to be sure.