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

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:命名空间前缀来判断它似乎是SV​​G标记的扩展.所以你不再在这里处理HTML了; 你正在处理XML,因为SVG是一种基于XML的标记语言.

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

无论如何,Web检查器为您的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%;">

您需要做的是使用以下内容在CSS中反映此XML命名空间@namespace rule:

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

并且,不是转义冒号,而是使用管道来指示命名空间前缀:

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

并预期它应该工作.