javascript - 当名称中有冒号时按属性选择元素

Question

考虑我在这里选择的 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 后有一个空格，单引号和双引号 - 运气不好。

Answer 1

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

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

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

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

您需要做的是使用 @namespace rule 在您的 CSS 中反射(reflect)此 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 .