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

Consider the CSS selection I have here:

考虑我在这里的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;
}

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

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

I am trying to select the ct-bar elements:

我想选择ct-bar元素：

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.

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

3 个解决方案

#1

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.

我从来没有使用过Chartist，但是通过ct：namespace前缀判断，它似乎是SVG标记的扩展。所以你不再在这里处理HTML了;你正在处理XML，因为SVG是一种基于XML的标记语言。

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.

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

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

无论如何，Web检查器为您的svg start标记显示以下XML：

<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规则在CSS中反映此XML命名空间：

@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.

它应该按预期工作。

#2

You shouldn't quote the attribute name, otherwise you are correctly escaping the colon.

您不应引用属性名称，否则您正确地转义冒号。

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

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

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

#3

It seems like the namespace selector would work only when the namespace is defined within the CSS itself in the below format:

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

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

From Selectors Spec: ^{emphasis is mine}

来自Selectors Spec：重点是我的

The attribute name in an attribute selector is given as a CSS qualified name: a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|).

属性选择器中的属性名称作为CSS限定名称给出：先前声明的名称空间前缀可以预先添加到由名称空间分隔符“竖线”（|）分隔的属性名称。

An attribute selector with an attribute name containing a namespace prefix that has not been previously declared is an invalid selector.

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

Once we add the namespace definition for ct into the CSS, the namespace based selector works as expected. The namespace's URI was taken from the <svg> tag that was generated.

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

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.

小提琴演示。

Note: The below selector doesn't work even after the namespace definition is added. The reason for this is provided by BoltClock in his answer.

注意：即使添加了命名空间定义，下面的选择器也不起作用。其原因是BoltClock在他的回答中提供的。

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

#1