Selezione di un elemento dal suo attributo quando ha due punti nel suo nome

Question

consideri la selezione CSS che ho qui:

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

Questo è un grafico di esempio utilizzando https://gionkunz.github.io/chartist-js/

Sono cercando di selezionare gli elementi della barra di ct:

Sembra che il colon tocchi il selettore. Ho provato diversi approcci di fuga:, \ 3A con uno spazio dopo, virgolette singole e doppie - senza fortuna.

Answer 1

Non ho mai usato Chartist, ma a giudicare dal prefisso namespace ct:, sembra essere una proroga per SVG markup. Quindi non hai più a che fare con l'HTML qui; hai a che fare con XML, perché SVG è un linguaggio di markup basato su XML.

Evasione del colon o altrimenti specificandolo come parte del nome di attributo non funziona perché il ct: non entra a far parte del nome dell'attributo quando è trattato come un prefisso dello spazio dei nomi (che è quello che è). In un normale documento HTML, un nome di attributo come ct:series-name includerebbe effettivamente il prefisso, perché i prefissi dei namespace hanno solo un significato speciale in XML, non in HTML.

In ogni caso, l'ispettore web mostra il seguente codice XML per il tag svg inizio:

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

Quello che dovete fare è riflettere questo namespace XML nel CSS utilizzando un @namespace rule:

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

E, piuttosto che sfuggire ai due punti, utilizzare un tubo per indicare un namespace prefix:

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

E it should work as expected.

Answer 2

Non si dovrebbe citare il nome dell'attributo, altrimenti si sta eseguendo correttamente l'escape dei due punti.

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

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

Answer 3

Sembra che il selettore namespace avrebbe funzionato solo quando lo spazio dei nomi è definito all'interno della stessa CSS nel formato di seguito:

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

Da Selectors Spec: ^{enfasi è mio}

Il nome attributo in un selettore di attributo è fornito come nome qualificato CSS: un prefisso dello spazio dei nomi che è stato precedentemente dichiarato può essere anteposto al nome dell'attributo separato dal separatore di spazi dei nomi "barra verticale" (|).

Un selettore di attributo con un nome di attributo contenente un prefisso del namespace che non è stato dichiarato in precedenza è un selettore non valido.

Una volta aggiunta la definizione dello spazio dei nomi per ct nel CSS, il selettore basato sullo spazio dei nomi funziona come previsto. L'URI dello spazio dei nomi è stato preso dal tag <svg> che è stato generato.

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: Il sotto di selezione non funziona anche dopo che si aggiunge alla definizione dello spazio dei nomi. Il motivo è fornito da BoltClock inhis answer.

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