सीएसएस स्टाइल नेस्टिंग - उचित फॉर्म?

मुझे स्टाइलशीट में सीएसएस नियमों को सही तरीके से लिखने के तरीके के बारे में कोई विशिष्ट विवरण खोजने का प्रयास करने में समस्या आ रही है, जहां कक्षा या आईडी कई अन्य आईडी और शैलियों के भीतर घोंसला है, उदा।सीएसएस स्टाइल नेस्टिंग - उचित फॉर्म?

.mainbody #container #header #toprightsearch .searchbox {}

तो यहाँ हम एक toprightsearch आईडी के भीतर एक searchbox वर्ग, में एक हैडर आईडी, में एक कंटेनर आईडी, एक mainbody कक्षा में है।

लेकिन अगर मैं कुछ आईडी छोड़ देता हूं तो यह ठीक से काम करता प्रतीत होता है।

सही इन्हें सूचीबद्ध करने का तरीका क्या है?
यदि मैं सभी माता-पिता को शामिल करता हूं तो यह अधिक विशिष्ट बनाता है? क्या मैं अलग-अलग ब्राउज़रों पर त्रुटि कर सकता हूं यदि मैं सभी शामिल नहीं करता हूं?

और इस विषय पर कोई अतिरिक्त जानकारी की सराहना की जाएगी।

धन्यवाद

स्रोत

2009-06-07 user103219

यदि आप अधिक माता-पिता शामिल करते हैं, तो यह चयनकर्ता विशिष्टता बढ़ाता है। माता-पिता को छोड़कर आपको क्रॉस-ब्राउज़र समस्याएं नहीं होनी चाहिए।

कोई सही अभिभावकों की संख्या सूचीबद्ध करने के लिए नहीं है; यह आपके मार्कअप के लिए आवश्यक चीज़ों पर निर्भर करता है। जैसा कि आप देख रहे हैं, selector1 selector2 का अर्थ selector2selector1 के अंदर किसी भी स्तर पर है, और आप जो भी व्यवहार चाहते हैं उसके लिए आप इसे ट्यून कर सकते हैं।

अपने उदाहरण में, आप .mainbody #container #header #toprightsearch .searchbox में सूचीबद्ध करना चाहिए अगर तुम क्या मतलब केवल .searchbox तों जो उस पूरे पदानुक्रम के अंदर हैं करने के लिए लागू करने के लिए शैली के लिए है। यदि आप विपरीत रूप से .searchboxes चाहते हैं जो समान शैली प्राप्त करने के लिए अन्य स्थितियों के तहत मौजूद है, तो आपको पदानुक्रम में कम प्रतिबंधित होना चाहिए। यह केवल वही है जो आप पूरा करने की कोशिश कर रहे हैं।

पुन: टिप्पणी करें: आईडी अधिक विशिष्टता उत्पन्न करती हैं, इसलिए उन्हें छोड़कर आपके नियम की विशिष्टता कम हो जाती है।

स्रोत

2009-06-07 16:49:06 chaos

ठीक है - और क्या आईडी बनाम कक्षाओं को छोड़ने में कोई अंतर है? – user103219

नीचे कोड (कम से कम फ़ायरफ़ॉक्स में) यह क्या कहते हैं करता है। यह इनपुट लाल

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> 
.mainbody #container #header #toprightsearch .searchbox { 
    background-color:red; 
} 
</style> 
</head> 

<body class="mainbody"> 

<div id="container"> 
    <div id="header"> 
     <div id="toprightsearch"> 
      <input type="text" class="searchbox" /> 
     </div> 
    </div> 

</div> 
</body> 
</html>

मुझे लगता है कि आपको देखना चाहिए कि आईडी और कक्षाओं में वर्तनी में कुछ गलत हुआ है या नहीं।

स्रोत

2009-06-07 16:45:29 jao

धन्यवाद, लेकिन मुझे इसे काम करने में कोई समस्या नहीं है। मैंने अभी देखा है कि अगर मैं अभिभावक आईडी और कक्षाओं को छोड़ देता हूं तो यह कभी-कभी काम करता है।इसलिए मैं नियमों को सूचीबद्ध करने का सही तरीका ढूंढ रहा हूं। – user103219

जो भी इसे कम करता है, उसके पास समस्याएं हैं। यह सवाल उठाने के सवाल के बारे में बहुत अच्छा जवाब था। – Chuck

सवाल यह था कि आप कुछ संयोजकों को क्यों छोड़ सकते हैं और फिर भी वही परिणाम प्राप्त कर सकते हैं - "यह बस्टेड नहीं है" सवाल है, लेकिन "यह अभी भी क्यों काम करता है?" सवाल। शायद यह वोट दिया गया था क्योंकि ऐसा प्रतीत होता है कि जाओ ने सवाल को ध्यान से नहीं पढ़ा (हालांकि मैंने इसे वोट नहीं दिया) –

W3 Selectors Documentation से:

वंशज चयनकर्ताओं एक पैटर्न में ऐसे रिश्ते व्यक्त करते हैं। एक वंशज चयनकर्ता सफेद अंतरिक्ष से अलग दो या दो से अधिक चयनकर्ताओं से बना होता है। फार्म "अटल बिहारी" मैचों का एक वंशज चयनकर्ता एक तत्व बी कुछ पूर्वज तत्व ए के एक मनमाना वंशज

तो संक्षेप में है जब, कोई आप माता पिता के सभी तत्वों शामिल करने के लिए नहीं है, और किसी भी क्रॉस-ब्राउज़र समस्याओं का कारण नहीं बनना चाहिए।हालांकि, इस चयनकर्ता के साथ:

.mainbody .searchbox {}

शैलियों परिभाषित searchbox के एक वर्ग है कि क्या यह वर्ग mainbody साथ एक तत्व से प्रत्यक्ष या परोक्ष रूप उतरता है के साथ किसी भी तत्व के लिए लागू होगी।

अपने प्रस्तावित चयनकर्ता के साथ

, तथापि:

.mainbody #container #header #toprightsearch .searchbox {}

शैलियों परिभाषित अधिक विशिष्ट, और इसलिए केवल तत्व उस वर्ग mainbody साथ एक तत्व के वंशज हैं, तो #container की आईडी के साथ तत्वों, #header, #toprightsearch में हैं उस आदेश और उसके पास कक्षा का नाम searchbox है परिभाषित शैलियों को लागू किया जाएगा।

स्रोत

2009-06-07 16:57:55

.searchbox {}

शैलियाँ .searchbox के साथ कुछ भी

.mainbody .searchbox{}

शैलियाँ किसी भी .searchbox है कि किसी भी .mainbody, प्रत्यक्ष बच्चे, पोते, चौगुनी महान पोते से खिसक जाती है, कोई फर्क नहीं पड़ता। केवल

#toprightsearch > .searchbox {}

शैलियाँ .searchboxes कि #toprightsearch के प्रत्यक्ष बच्चे हैं

#container * .searchbox {}

शैलियाँ के कि पोता हैं या बाद में #container की .searchbox।

यहाँ विषय पर एक अच्छा दस्तावेज है: w3C selectors

स्रोत

2009-06-07 17:00:18

ईद के पेज के लिए विशिष्ट हैं। तो आप बस

#toprightsearch { 
stylename: stylevalue; 
}

यदि आपका नेस्टेड कक्षाओं की तलाश में उपयोग करना चाहते हैं तो सही प्रारूप

.header .textBoxes { 
    stylename: stylevalue; 
}

है आप जानते हैं कि एक माता पिता का सही बच्चे तो आप> संकेत का उपयोग करते हैं। इसलिए यदि आपके दस्तावेज़ इस तरह था:

<div class="header"> 
    <div class="menu"> 
     <input type="text" class="textBox" /> 
    </div> 
</div>

आप इस का उपयोग कर सकते हैं:

.header > .menu > .textBox {somestyle:somevalue;}

यह सीधे एक .menu वर्ग मद जो अपने आप में एक नीचे सीधे है के अंदर एक .textBox वर्ग के साथ ही आइटम का मतलब .header की एक वर्ग के साथ तत्व।

स्रोत

2012-08-20 20:48:25 David

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

toprightsearch .searchbox {}

toprightsearch की आईडी के साथ अपने पृष्ठ पर केवल एक आइटम है, क्योंकि, अन्य सभी चयनकर्ताओं हैं: तो आप केवल अपने सीएसएस के लिए बहुत toprightsearch की आईडी के साथ एक आइटम होना चाहिए, आप केवल इंगित करने के लिए की जरूरत है अनावश्यक।

यदि आपके पास toprightsearch की आईडी के साथ आपके पृष्ठ पर दो आइटम हैं तो यह खराब कोडिंग अभ्यास है।

स्रोत

2017-10-24 19:08:33 Neptune704

सीएसएस स्टाइल नेस्टिंग - उचित फॉर्म?

उत्तर

संबंधित मुद्दे