当名称中包含冒号时通过其属性选择元素

Posted 2023-03-06

【中文标题】当名称中包含冒号时通过其属性选择元素

【英文标题】：Selecting an element by its attribute when it has a colon in its name

【发布时间】：2016-03-30 12:27:29

【问题描述】：

考虑一下我在这里的 CSS 选择：

http://jsfiddle.net/dx8w6b64/

/* This works:
 #myChart .ct-series-b .ct-bar  
 */


/* This does not (chromium, glnxa64) */
['ct\:series-name'='second'] .ct-bar 
  /* Colour of your points */
  stroke: black;
  /* Size of your points */
  stroke-width: 20px;
  /* Make your points appear as squares */
  stroke-linecap: round;

这是一个使用https://gionkunz.github.io/chartist-js/的示例图表

我正在尝试选择 ct-bar 元素：

冒号似乎正在抛弃选择器。我努力了 各种转义方法 :, \3A 后面有一个空格，单引号和双引号 - 运气不好。

【问题讨论】：

根本不要将属性放在引号中，即[ct\:series-name='second']（未经测试，但我昨天刚刚在某个地方读到过）

这有点奇怪。 [ct\:series-name="second"]works here，但not here。在 DOM 中，该属性显示为 ct:series-name="second"，但是当您检查实际的 html 时，该属性是 series-name="second"（至少在 Chrome 控制台中对我而言）。

这里没有人知道 XML 吗？这很明显是一个命名空间前缀——我们在这里处理的是 SVG，一种基于 XML 的标记语言，而不是 HTML。

@BoltClock：花了一些时间才弄清楚，但我最终做到了：D

How to use CSS attribute selector for an SVG element with namespaced attribute href?的可能重复

【参考方案1】：

你不应该引用属性名，否则你正确地转义了冒号。

[ct\:series-name='second'] 

见https://msdn.microsoft.com/en-us/library/ms762307(v=vs.85).aspx

【讨论】：

我记得我也试过。像这样：jsfiddle.net/whfactq2？似乎仍然不起作用:(

我的错，我通常会测试我的答案，但我在手机上，你看到@namespace 语法了吗？ developer.mozilla.org/en-US/docs/Web/CSS/@namespace

那个 MSDN 文档似乎是一个非常古老的文档——它把 IE 称为“Microsoft® Internet Explorer”，在他们开始称它之前最后一次与 IE6 一起使用“ Windows® Internet Explorer”在 2006 年与 IE7 一起推出。@namespace 是最近才引入和实现的 - IE 在 2011 年的版本 9 中首次实现它，同时引入了对 application/xhtml+xml 的支持。

@JuanMendes - 感谢您提供有关 \@namespace 的提示 - 如果没有 Boltclock 的回答，您将无法弄清楚。

【参考方案2】：

似乎命名空间选择器只有在 CSS 本身以以下格式定义命名空间时才起作用：

@namespace <namespace-prefix>? [ <string> | <uri> ];

来自Selectors Spec：^{重点是我的}

属性选择器中的属性名称以 CSS 限定名称的形式给出：之前已声明的名称空间前缀可以添加到由名称空间分隔符“竖线”分隔的属性名称之前（ |)。

属性名称包含先前未声明的命名空间前缀的属性选择器是无效选择器。

一旦我们将 ct 的命名空间定义添加到 CSS 中，基于命名空间的选择器就会按预期工作。命名空间的 URI 取自生成的 <svg> 标记。

var data = 
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [
    name: 'first',
    data: [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
  , 
    name: 'second',
    data: [3, 4, 2, 6, 3, 2, 1, 4, 6, 2]
  ]
;

var options = 
  high: 10,
  low: -10,
  onlyInteger: true
;

new Chartist.Bar('.ct-chart', data, options);

@namespace ct url(http://gionkunz.github.com/chartist-js/ct);
[ct|series-name="second"] .ct-bar 
  stroke: black !important; /* without important it doesn't seem to work in snippet but works in fiddle */
  stroke-width: 20px;
  stroke-linecap: round;

<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" />
<div id="myChart" class="ct-chart" style="height:400px"></div>

Fiddle Demo.

---

注意：即使添加了命名空间定义，下面的选择器也不起作用。 原因由 BoltClock 在 his answer 提供。

[ct\:series-name="second"] .ct-bar 

【讨论】：

请注意这个命名空间声明必须放在css文件的顶部。更准确地说，正如该线程***.com/questions/24628932/… 中所述，正常的 CSS 规则不得位于任何 \@namespace 规则之前，否则 \@namespace 规则无效。 CSS 命名空间模块级别 3 w3.org/TR/css3-namespace 说 > 任何 \@namespace 规则都必须遵循所有 \@charset 和 \@import 规则，并在样式表中所有其他不可忽略的 at 规则和样式规则之前。

【参考方案3】：

我从未使用过 Chartist，但从 ct: 命名空间前缀来看，它似乎是 SVG 标记的扩展。因此，您不再在这里真正处理 HTML；您正在处理 XML，因为 SVG 是一种基于 XML 的标记语言。

转义冒号或以其他方式将其指定为属性名称的一部分不起作用，因为当ct: 被视为命名空间前缀（就是这样）时，它不再成为属性名称的一部分。在常规 HTML 文档中，像 ct:series-name 这样的属性名称确实会包含前缀，因为命名空间前缀仅在 XML 中具有特殊含义，在 HTML 中没有。

无论如何，网络检查器会为您的 svg 开始标记显示以下 XML：

<svg class="ct-chart-bar" xmlns:ct="http://gionkunz.github.com/chartist-js/ct"   style="width: 100%; height: 100%;">

您需要做的是在您的 CSS 中使用 @namespace rule 反映这个 XML 命名空间：

@namespace ct 'http://gionkunz.github.com/chartist-js/ct';

并且，不要转义冒号，而是使用竖线表示namespace prefix：

[ct|series-name='second'] .ct-bar 
  stroke: black;
  stroke-width: 20px;
  stroke-linecap: round;

还有it should work as expected。

【讨论】：

哦，我明白了，这就是为什么 \: 即使在添加命名空间声明后也不起作用的原因。

或者更简单，使用通配符命名空间 (*|attr)，无需声明命名空间。见***.com/a/23047888/3702797

@Kaiido：这是假设属性名称对于它们各自的名称空间来说足够独特，您实际上不需要名称空间名称来消除歧义（您知道，这就是名称空间的全部意义）。

我感觉您在第一句话中实际上并不是指“不能”，而是“不要经常”，因为[*|attr] 是完全合法的。同样，如果你可以依赖它们，没有什么能阻止你对标记做出假设 - 只要记住，一旦你开始遇到无法预料的问题，你就做出了这些假设。

@AlexLaforge：我记得回答过这个问题。我记得当我第一次回答时，出现在 at-namespace 规则之前的样式规则不存在，然后提问者通过查看他们自己的代码意识到了这一点，因此进行了编辑。