当元素的名称中有冒号时，按其属性选择元素
当元素的名称中有冒号时，按其属性选择元素
提问于 2015-12-24 10:06:59
考虑我这里的CSS选择：
/* 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，后面有空格，单引号和双引号-没有成功。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-24 13:45:26
我从未使用过Chartist，但从ct:名称空间前缀判断，它似乎是对SVG markup的扩展。因此，您在这里不再真正处理HTML；而是处理XML，因为SVG是一种基于XML的标记语言。
转义冒号或将其指定为属性名的一部分是不起作用的，因为当ct:被当作名称空间前缀对待时(它就是这样)，它不再成为属性名的一部分。在常规的超文本标记语言文档中，像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%;">您需要做的就是使用@namespace rule在CSS中反映这个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;
}Stack Overflow用户
发布于 2015-12-24 10:14:02
您不应该引用属性名，否则您将正确地转义冒号。
[ct\:series-name='second'] 请参阅https://msdn.microsoft.com/en-us/library/ms762307(v=vs.85).aspx
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34446361
复制相关文章
相似问题
腾讯云开发者
