当名称中有冒号时按属性选择元素

Question

考虑一下我这里的 CSS select离子：

/* 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/

的示例图表

我正在尝试 select ct-bar 元素：

冒号似乎与 selector 分开了。我试过了各种转义方法 :, \3A 后加 space，单引号和双引号 - 运气不好。

Answer 1

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

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

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

Answer 2

似乎只有在 CSS 本身以下面的格式定义了命名空间时，命名空间选择器才起作用：

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

From Selectors Spec: ^{emphasis is mine}

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" (|).

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

一旦我们将 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>

Fiddle Demo.

注意：即使在添加命名空间定义后，下面的选择器也不起作用。 原因由 BoltClock 在 .

中提供

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

Answer 3

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

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

无论如何，网络检查器会为您的 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;
}

和it should work as expected.

当名称中有冒号时按属性选择元素

Selecting an element by its attribute when it has a colon in its name

javascript

css

svg

css-selectors

chartist.js