HTML tag 带冒号、通配符的属性选择器

Question

我有以下元素：

<page-title xml:lang="x-default">Text</page-title>

我需要能够通过它的属性 select 它作为一个标签列表，我需要单独 select。

问题是我无法 select 具有以下元素的元素：

page-title[xml:lang="x-default"]

因为“:”冒号似乎破坏了属性，因为它可能不是一个有效的字符。我知道您可以使用通配符 selectors 作为属性的值，例如 * 用于包含和 ^ 用于开头，等等。

我的问题是，是否可以构建一个 selector，它不是针对属性值而是针对属性名称本身使用通配符？如：

page-title[*lang="x-default"]

对于 selector 会得到一个属性名称包含“lang”且值为“x-default”的元素？

这也许可以通过 JavaScript 以某种方式完成吗？如果可以的话，我还有 jQuery 可用。

Answer 1

要转义 jQuery/JS 选择器中的字符，您可以使用 \:

$('page-title[xml\:lang="x-default"]').addClass('jquery'); // jquery

document.querySelector('page-title[xml\:lang="x-default"]').classList.add('native'); // native

.jquery { color: #C00; }
.native { text-decoration: underline; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<page-title xml:lang="x-default">Text</page-title>

HTML tag 带冒号、通配符的属性选择器

HTML tag Attribute selector with colon, wildcard

html

javascript

css

jquery