19

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

4

3 回答 3

8

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

转义冒号或以其他方式将其指定为属性名称的一部分不起作用，因为ct:当它被视为命名空间前缀（这就是它的本质）时，它不再成为属性名称的一部分。在常规的 HTML 文档中，属性名称 likect:series-name确实会包含前缀，因为名称空间前缀仅在 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%;">

你需要做的是在你的 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;
}

它应该按预期工作。

于 2015-12-24T05:45:26.087 回答
3

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

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

来自Selectors Spec :重点是我的

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

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

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

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>

小提琴演示。

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

[ct\:series-name="second"] .ct-bar {}
于 2015-12-24T05:06:25.290 回答
3

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

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

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

于 2015-12-24T02:14:02.163 回答