当名称中包含冒号时，按其属性选择元素 [英] Selecting an element by its attribute when it has a colon in its name

问题描述

考虑我在这里的CSS选择：

冒号似乎正在抛弃选择器。我尝试了
各种逃生方法：，\ 3AA后有空格，单引号和双引号 - 没有运气。

解决方案

我从未使用过Chartist，但是从 ct：命名空间前缀判断，它似乎是SV​​G标记的扩展。所以你不再在这里处理HTML了;你正在处理XML，因为SVG是一种基于XML的标记语言。

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

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

 < svg class =ct-chart-barxmlns：ct =http://gionkunz.github.com/chartist-js/ctwidth = 100％height =100％style =width：100％; height：100％;> 
  

您需要做的是使用 @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; 
} 
  

和它应该按预期工作。

Consider the CSS selection I have here:

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;
}

This is a sample chart using https://gionkunz.github.io/chartist-js/

I am trying to select the ct-bar elements:

The colon appears to be throwing off the selector. I have tried various escape approaches :, \3A with a space after, single and double quotes - no luck.

解决方案

I've never used Chartist, but judging by the ct: namespace prefix, it appears to be an extension to SVG markup. So you're no longer really dealing with HTML here; you're dealing with XML, because SVG is an XML-based markup language.

Escaping the colon or otherwise specifying it as part of the attribute name doesn't work because the ct: no longer becomes part of the attribute name when it's treated like a namespace prefix (which is what it is). In a regular HTML document, an attribute name like ct:series-name would indeed include the prefix, because namespace prefixes only have special meaning in XML, not in HTML.

Anyway, the web inspector shows the following XML for your svg start tag:

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

What you need to do is reflect this XML namespace in your CSS using a @namespace rule:

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

And, rather than escaping the colon, use a pipe to indicate a namespace prefix:

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

And it should work as expected.

这篇关于当名称中包含冒号时，按其属性选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！