अपनी विशेषता के आधार पर एक तत्व का चयन जब वह अपने नाम पर एक बृहदान्त्र

Question

सीएसएस चयन पर विचार किया है मैं यहाँ है:

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

इस का उपयोग करते हुए एक नमूना चार्ट है https://gionkunz.github.io/chartist-js/

मैं कर रहा हूँ सीटी-बार तत्वों का चयन करने की कोशिश कर रहा है:

कॉलन चयनकर्ता को फेंकने लगते हैं। मैंने विभिन्न बचने के दृष्टिकोणों की कोशिश की है: \ 3 ए के बाद एक स्थान के साथ, सिंगल और डबल कोट्स - कोई भाग्य नहीं।

Answer 1

मैं चार्टिस्ट उपयोग नहीं किया है, लेकिन ct: नामस्थान उपसर्ग द्वारा पहचानने, यह एसवीजी मार्कअप के लिए एक विस्तार प्रतीत होता है। तो अब आप वास्तव में यहां HTML से काम नहीं कर रहे हैं; आप एक्सएमएल से काम कर रहे हैं, क्योंकि एसवीजी एक एक्सएमएल आधारित मार्कअप भाषा है।

कॉलन से बचने या अन्यथा विशेषता नाम के हिस्से के रूप में इसे निर्दिष्ट करने से काम नहीं होता है क्योंकि ct: अब नामस्थान का उपसर्ग (जो यह है) की तरह व्यवहार गुण का हिस्सा बन जाता है। एक नियमित HTML दस्तावेज़ में, ct:series-name जैसे एक विशेषता नाम में वास्तव में उपसर्ग शामिल होगा, क्योंकि नामस्थान उपसर्ग केवल HTML में विशेष अर्थ है, HTML में नहीं।

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

:

<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 का उपयोग कर अपने सीएसएस में इस XML नामस्थान को प्रतिबिंबित है:

वैसे भी, वेब निरीक्षक को अपने svg स्टार्ट टैग के लिए निम्नलिखित एक्सएमएल से पता चलता और, कोलन से बचने के बजाय, namespace prefix:

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

इंगित करने के लिए एक पाइप का उपयोग करें

और it should work as expected।

Answer 2

आपको विशेषता का नाम उद्धृत नहीं करना चाहिए, अन्यथा आप कोलन से बच रहे हैं।

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

देखें https://msdn.microsoft.com/en-us/library/ms762307(v=vs.85).aspx

Answer 3

यह नाम स्थान चयनकर्ता की तरह लगता है काम करेगा केवल जब नाम स्थान नीचे प्रारूप में सीएसएस के भीतर ही परिभाषित किया गया है: Selectors Spec से

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

: ^{जोर मेरा}

विशेषता का नाम एक विशेषता चयनकर्ता को सीएसएस योग्य नाम के रूप में दिया जाता है: नामस्थान उपसर्ग जिसे पहले घोषित किया गया है नामस्थान विभाजक "लंबवत बार" (|) द्वारा अलग किए गए विशेषता नाम पर प्रीपेड किया जा सकता है।

एक विशेषता नाम के साथ एक विशेषता चयनकर्ता जिसमें नामस्थान उपसर्ग शामिल है जिसे पहले घोषित नहीं किया गया है, एक अमान्य चयनकर्ता है।

एक बार जब हम सीएसएस में ct के लिए नाम स्थान परिभाषा जोड़ने के लिए, नाम स्थान आधारित चयनकर्ता के रूप में उम्मीद काम करता है। नामस्थान का यूआरआई <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।

---

नोट: चयनकर्ता नीचे के बाद भी नाम स्थान परिभाषा जोड़ा जाता है काम नहीं करता। इसका कारण बोल्टक्लॉक द्वाराhis answer में प्रदान किया गया है।

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