Question

考虑我在这里的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元素：

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

Answer 1

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

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

无论如何，Web检查员会为您的<svg class="ct-chart-bar" xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" style="width: 100%; height: 100%;">开始标记显示以下XML：

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

您需要做的是使用@namespace rule

在CSS中反映此XML命名空间

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

而不是转义冒号，而是使用管道来表示namespace prefix：

MPMoviePlayerViewController

it should work as expected。

Answer 2

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

//Add new item to To-Do List
function addNewItem(list, itemText) {
  totalItems++;

  var listItem = document.createElement("li");

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = "cb_" + totalItems;
  checkbox.onclick = updateStatus;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.textContent = itemText;


  var spanDelete = document.createElement("span2");
  spanDelete.id= "spanDelete_" + totalItems;
  spanDelete.textContent = "DELETE";
  spanDelete.onclick = deleteItem;


  var spanEdit = document.createElement("span3")
  spanEdit.id = "editId_" + totalItems;
  spanEdit.textContent = "EDIT";
  spanEdit.onclick = editItem;

  listItem.appendChild(checkbox);
  listItem.appendChild(span);
  listItem.appendChild(spanDelete);
  listItem.appendChild(spanEdit);


  list.appendChild(listItem);
}

//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
  if (event.which === 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();
  }
}


  //Add item to To-Do List with "Add" Button
  var btnNew = document.getElementById("btnAdd");
  btnNew.onclick = function() {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }


    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();

  }

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

Answer 3

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

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

来自Selectors Spec：^{强调是我的}

属性选择器中的属性名称是作为CSS限定名称给出的：先前已声明的名称空间前缀可以预先添加到由名称空间分隔符分隔的属性名称＆＃34; vertical BAR＆＃34; （|）。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle Demo

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

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

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

3 个答案: