Выбор элемента по его атрибуту, когда он имеет двоеточие в своем имени

Рассмотрим выбор 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:

Дыра, кажется, выбрасывает селектор. я пытался различные escape-подходы:,\3A с пробелом после, одиночные и двойные кавычки - не повезло.

Ответ 1

Я никогда не использовал Chartist, но, судя по префиксу пространства имен ct:, он является расширением для разметки SVG. Таким образом, вы больше не имеете дело с HTML здесь; вы имеете дело с XML, потому что SVG - это язык разметки на основе XML.

Выход из двоеточия или иное указание его как части имени атрибута не работает, потому что ct: больше не становится частью имени атрибута, когда он обрабатывается как префикс пространства имен (что является тем, чем оно является). В обычном HTML-документе имя атрибута типа ct:series-name действительно будет включать префикс, потому что префиксы пространства имен имеют особый смысл в XML, а не в HTML.

В любом случае, веб-инспектор показывает следующий XML-код для вашего тега svg:

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

Что вам нужно сделать, это отразить это пространство имен XML в вашем CSS, используя @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;
}

И он должен работать как ожидалось.

Ответ 2

Вы не должны указывать имя атрибута, иначе вы правильно экранируете двоеточие.

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

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

Ответ 3

Кажется, что селектор пространства имен будет работать только тогда, когда пространство имен определено внутри самого CSS в следующем формате:

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

От Спектры селекторов: ^{акцент мой}

Имя атрибута в селекторе атрибутов указывается как квалифицированное имя 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="#" onclick="location.href='https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css'; return false;" rel="stylesheet" />
<div id="myChart" class="ct-chart" style="height:400px"></div>