सीएसएस में रिक्त स्थान के साथ एक लंबी कक्षा के नाम का संदर्भ कैसे लें?

Question

मैं कुछ ड्रूपल आउटपुट शैली बनाने की कोशिश कर रहा हूं। विशेष रूप से, मैं एक सुपर लंबे नाम के साथ एक वर्ग का संदर्भ देने की कोशिश कर रहा हूं (जिसमें रिक्त स्थान शामिल हैं)। मैं इसके लिए वाक्यविन्यास अस्पष्ट हूँ। मुझे माफ़ कर दो, मैं एक सीएसएस नौसिखिया हूँ। देखें:

<article id="node-38" class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" about="/~actionin/node/38" typeof="sioc:Item foaf:Document"> 
    <header> 
     <h2 property="dc:title" datatype=""><a href="/~actionin/node/38">National Nutrition Month: March 2012: “Get Your Plate in Shape”</a></h2> 

मैं अंत में एच 2 संपत्ति का संदर्भ देना चाहता हूं। ,

.node SOMETHING-HERE .header h2 { declaration; } 

मैं सिर्फ नोड संदर्भ नहीं दे सकता, क्योंकि यह अन्य प्रयोजनों के लिए कहीं और प्रयोग किया जाता है: मैं सोच रहा था कि यह कुछ ऐसा होगा। (।): मैं विशिष्ट हो सकता है और केवल इस वर्ग का चयन करना चाहते

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

Answer 1

डॉट्स का उपयोग करके आप एक समूह के रूप में कई वर्ग को जोड़ सकते हैं

.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix { 
... 
} 

Answer 2

उन रिक्त स्थान एक तत्व पर प्रभावी ढंग से कई वर्गों हैं, इसलिए आपके <article> टैग में "नोड" वर्ग है, और "नोड-आलेख" वर्ग है, और इसी तरह से।

तो अगर आप था:

.node { background-color: black; } 
.node-article { color: white; } 

फिर लेख एक काले रंग की पृष्ठभूमि, और सफेद पाठ होगा। दोनों लागू होंगे।

यह भी याद रखें कि आप टैग, और आईडी संदर्भित कर सकते हैं, तो आपके एच 2 को पाने के लिए आप कर सकता है:

article header h2 { .... } 

या

#node-38 header h2 { .... } 

और तुम जरूरी "शीर्षक" की जरूरत नहीं है वहां या तो, जो आप प्राप्त करना चाहते हैं उसके आधार पर।

आप सभी <h2> कि "नोड लेख" के साथ <article> टैग के वंशज हैं का चयन करना चाहते हैं वर्ग है, तो आप ऐसा कर सकते हैं:

article.node-article h2 

Answer 3

शायद मैं आपको जवाब आप नहीं दे रहा हूँ आवश्यकता है, लेकिन कक्षा के नामों में रिक्त स्थान शामिल नहीं हो सकते हैं।

एक तत्व में कई कक्षाएं हो सकती हैं, जो आपको एक ही तत्व पर लागू करने के लिए विभिन्न वर्गों के लिए एकाधिक स्टाइल नियमों को गठबंधन करने की अनुमति देती है।

यदि आपके पास कक्षा विशेषता में रिक्त स्थान हैं, तो यह कई वर्गों के साथ एक तत्व बनाता है, जो रिक्त स्थान से सीमित है।

उदाहरण के लिए

, तो आप इस

<div class="big red outlined"></div> 

की तरह एक तत्व है और आप यह बड़ा बनाने के लिए इस

.big { 
    width: 1000px; 
    height: 1000px; 
} 

.red { 
    color: red; 
} 

.outlined { 
    border: 1px solid black; 
} 

तीनों शैलियों एकल div पर लागू किया जाएगा की तरह सीएसएस थी, लाल , और रेखांकित।

आपके मामले में, ऐसा लगता है कि आप एक विशिष्ट तत्व तक पहुंचने का प्रयास कर रहे हैं, जो कि id विशेषता का उद्देश्य है।सूचना नोड में एक विशिष्ट आईडी है:

<article id="node-38"> 

आप # चयनकर्ता का उपयोग करके सीएसएस में एक विशिष्ट आईडी के साथ एक तत्व का उपयोग कर सकते, इस

#node-38 { 
    //style goes here 
} 

आपके मामले में की तरह, तो आप शायद करना चाहते हैं ऐसा कुछ करें:

#node-38 .header h2 { 
    //style goes here 
} 

Answer 4

जब आप कक्षा के साथ तत्व को परिभाषित करते हैं, तो रिक्त स्थान वास्तव में कई वर्गों को दर्शाता है।

उस लेख में वास्तव में निम्न वर्गों को लागू किया गया है: नोड, नोड-आलेख, नोड-टीज़र, प्रासंगिक-लिंक-क्षेत्र, नोड-यहां तक, प्रकाशित, टिप्पणियों, नोड-टीज़र और स्पष्टफिक्स के साथ प्रकाशित।

तत्व को लक्षित करते समय आप इनमें से किसी भी वर्ग का उपयोग कर सकते हैं। अगर मैं एच 2 टैग को संदर्भित कर रहे थे मैं की तरह

article#node-38 header h2{ 

कुछ करना होगा यह एक बहुत अधिक विशिष्ट तरीके से उन वर्गों के सभी का उपयोग करने से लक्षित करने के लिए है। यह छोटा वाक्यविन्यास है, और उस तत्व के लिए अधिक विशिष्ट है जिसे आप शैली बनाना चाहते हैं।

Answer 5

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

उपरोक्त रेखा में उनके बीच की जगहों के कारण कुल 9 कक्षाएं हैं। इसलिए, node एक एकल वर्ग है, node-article एक और कक्षा है और इसी तरह। आप तो एक वर्ग का संदर्भ लेना चाहते हैं, तो आप की तरह

.node{background-color:red;} 

यह लिखना चाहिए आप तो आप की तरह

.node, node-article, node-teaser{background-color:red;} 

उस मामले में लिख सकते हैं एक साथ कई वर्गों का संदर्भ और एक ही शैली लागू करना चाहते हैं करना चाहते हैं तीन व्यक्तिगत वर्ग nodenode-articlenode-teaser पृष्ठभूमि रंग लाल रंग के साथ एक ही शैली होगी। अब यदि आपके पास एक ही कक्षा के साथ कई तत्व हैं i.e. article तो उसी श्रेणी वाले सभी लेखों में एक ही शैली होगी। एक अनन्य एलीमेंट आप कर सकते हैं id बजाय class आईडी = "नोड-38" की तरह है और आप शैली का चयन करें/करने के लिए

article#node-38{background-color:red;} 

की तरह इस तत्व को सीएसएस के साथ आवेदन कर सकते हैं हैडर अंदर h2 संदर्भ माता पिता के साथ करने के लिए एक शैली लागू करने के लिए तत्व आलेख जिसमें id = "node-38" है, आप

article#node-38 header h2{background-color:red;}