javascript - selectores - Seleccionar un elemento por su atributo cuando tiene dos puntos en su nombre

selector por atributo jquery

Question

Considera la selección de CSS que tengo aquí:

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

Este es un gráfico de muestra que utiliza https://gionkunz.github.io/chartist-js/

Estoy tratando de seleccionar los elementos de ct-bar:

Los dos puntos parecen estar lanzando el selector. He intentado varios enfoques de escape:, / 3A con un espacio después, comillas simples y dobles, sin suerte.

Answer 1

No debe citar el nombre del atributo, de lo contrario está escapando correctamente de los dos puntos.

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

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

Answer 2

Nunca he usado Chartist, pero a juzgar por el prefijo ct: namespace, parece ser una extensión del marcado SVG. Así que ya no estás tratando realmente con HTML aquí; estás tratando con XML, porque SVG es un lenguaje de marcado basado en XML.

Escapar de los dos puntos o, de lo contrario, especificarlo como parte del nombre del atributo no funciona porque ct: ya no forma parte del nombre del atributo cuando se lo trata como un prefijo de espacio de nombres (que es lo que es). En un documento HTML normal, un nombre de atributo como ct:series-name incluiría el prefijo, porque los prefijos de espacio de nombres solo tienen un significado especial en XML, no en HTML.

De todos modos, el inspector web muestra el siguiente XML para su etiqueta de inicio svg :

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

Lo que debe hacer es reflejar este espacio de nombres XML en su CSS usando una @namespace rule :

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

Y, en lugar de escapar de los dos puntos, use un conducto para indicar un prefijo de espacio de nombres :

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

Y debería funcionar como se esperaba .

Answer 3

Parece que el selector de espacio de nombres funcionaría solo cuando el espacio de nombres se define dentro del propio CSS en el siguiente formato:

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

De los selectores Spec : el ^{énfasis es mío}

El nombre de atributo en un selector de atributo se proporciona como un nombre calificado de CSS: un prefijo de espacio de nombres que se haya declarado previamente puede ir precedido del nombre de atributo separado por el separador de espacio de nombres "barra vertical" (|).

Un selector de atributo con un nombre de atributo que contiene un prefijo de espacio de nombres que no se ha declarado previamente es un selector no válido.

Una vez que agregamos la definición del espacio de nombres para ct en el CSS, el selector basado en el espacio de nombres funciona como se esperaba. El URI del espacio de nombres se tomó de la etiqueta <svg> que se generó.

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 .

Nota: el siguiente selector no funciona incluso después de agregar la definición del espacio de nombres. El motivo de esto lo proporciona BoltClock en su respuesta .

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