如何在 HTML 文档中使用 CSS 命名空间选择器？答案

【问题标题】：How to use CSS namespace selectors with an HTML document?如何在 HTML 文档中使用 CSS 命名空间选择器？
【发布时间】：2020-06-05 07:06:42
【问题描述】：

我有一个使用命名空间的HTML 文档：

<!DOCTYPE html>
<html lang="en"
      xmlns:test="http://example/test">
<head>
    <title>Selectors</title>
    <link href="selectors.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <test:p>Hello</test:p>
</body>

</html>

正如您在本文档中看到的，我定义了 xmlns:test="http://example/test" 命名空间，然后在这里使用它：<test:p>Hello</test:p>。

根据css @namespace selector documentation，在我的css 文件中，我选择了test:p 元素，如下所示：

@namespace test url("http://example/test");

test|p {
    color:red;
}

由于某种原因，test:p 元素未被选中。谁能告诉我我做错了什么以及如何选择具有适当命名空间的元素？

【问题讨论】：

标签： html css css-selectors namespaces frontend

【解决方案1】：

您可以使用反斜杠来转义冒号：

test\:p {
   color:blue;
}

如果你使用 jQuery，你必须使用双斜线

$('.test\\:p')

【讨论】：