* * CSS चयनकर्ता क्या करता है?

Question

हाल ही में मैं सीएसएस* * में आया था ।

साइट संदर्भ - साइट लिंक ।

*CSS स्टाइल शीट में एकल उपयोग के लिए , इंटरनेट और स्टैक ओवरफ़्लो उदाहरणों से भरा हुआ है, लेकिन मैं * *CSS में दो प्रतीक का उपयोग करने के बारे में निश्चित नहीं हूं ।

मैंने इसे googled, लेकिन इस बारे में कोई भी प्रासंगिक जानकारी प्राप्त करने में असमर्थ है, क्योंकि एक ही *सभी तत्वों का चयन करता है, लेकिन मुझे यकीन नहीं है कि साइट ने दो बार इसका उपयोग क्यों किया। इसके लिए लापता भाग क्या है, और इस हैक का उपयोग क्यों किया जाता है (यदि यह हैक है)?

Answer 1

बस किसी भी समय आप दो चयनकर्ताओं को एक के बाद एक (उदाहरण के लिए li a) डालते हैं , आपको वंशज कॉम्बिनेटर मिलता है। तो * *कोई भी तत्व किसी अन्य तत्व का वंशज है - दूसरे शब्दों में, ऐसा कोई भी तत्व जो पूरे दस्तावेज का मूल तत्व नहीं है।

Comments

इस जवाब के लिए thx..यह वही है जो मैं सोच रहा था, लेकिन निश्चित रूप से समुदाय से पूछने के लिए नहीं सोचा

— था..जल्द

सिर्फ एक और बात पूछना - क्या यह वास्तव में उपयोग करने के लिए प्रासंगिक है * *? यद्यपि मैं अवधारणा को समझ लेता हूं, लेकिन इसे व्यावहारिक रूप में नहीं पा रहा

— हूं

@swapnesh यह एक ब्राउज़र हैक की तरह दिखता है। एक * { font-size: XXX }नियम और एक * * { font-size: YYY }नियम है। उनमें से एक सबसे ब्राउज़रों पर लागू होता है, और दूसरा एक निश्चित बग के साथ ब्राउज़रों पर लागू होता है, हालांकि विवरणों का पता लगाने के लिए मेरे पास धैर्य नहीं है। यह उस * htmlहैक के समान है जो पुराने IE का पता लगाने के लिए सामान्य उपयोग में होता था।

— हॉब्स

टिप्पणियों के तहत अंतिम विस्तृत ब्लॉक जोड़ने के लिए thx.. यह लगभग एक सही है..कि इसके लिए अधिक मस्तिष्क तूफानी करने की जरूरत है :) बहुत thx :)

— swapnesh

ध्यान दें कि * html, IE6 में html तत्व * * से मेल खाएगा।

— अलोहसी

Answer 2

बस एक छोटा सा उदाहरण:

इसे अपनी साइट पर जोड़ने का प्रयास करें:

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

डेमो: http://jsfiddle.net/l2aelba/sFSad/

---

उदाहरण 2:

डेमो: http://jsfiddle.net/l2aelba/sFSad/34/

Comments

यह सख्ती से जवाब नहीं है, लेकिन क्या एक सुंदर दृश्य!

— aboy021

@ l2aelba वास्तव में स्पष्टीकरण का एक अच्छा टुकड़ा :) +1

— स्वप्नेश

Answer 3

* *शीर्ष-स्तरीय तत्व को छोड़कर सब कुछ मेल खाता है, जैसे html,।

Comments

धन्यवाद जो, ने इसे यहां और ऊपर की टिप्पणियों के अनुसार भी परीक्षण किया : * *चयनकर्ता html *पुराने अच्छे IE6 :-) को छोड़कर सभी ब्राउज़रों के लिए बराबर है

— स्टेनो

HTML फ़ाइल के लिए @Stano ... के * *बराबर है html *। लेकिन सीएसएस का उपयोग अन्य प्रकार के दस्तावेजों (एसवीजी विशेष रूप से) को स्टाइल करने के लिए किया जा सकता है।

— सिल्वेन लेरॉक्स

Answer 4

* का अर्थ है सभी तत्वों को दी गई शैलियों को लागू करना।

* *का अर्थ है दिए गए शैलियों को सभी तत्वों के बाल तत्वों पर लागू करना। उदाहरण:

body > * {
  margin: 0;
}

यह शरीर के सभी बाल तत्वों पर मार्जिन शैलियों को लागू करता है। उसी तरह,

* * {
  margin: 0;
}

बच्चे के तत्वों पर लागू होता margin: 0है *। संक्षेप में, यह margin: 0लगभग हर तत्व पर लागू होता है।

आम तौर पर, एक *पर्याप्त है। दो की कोई जरूरत नहीं है * *।

Comments

स्पष्टीकरण के लिए thx +1 ..हालांकि यहां तक ​​कि मुझे यकीन नहीं है कि आपने अभी जो अंतिम पंक्ति में उल्लेख किया है "आम तौर पर, * पर्याप्त है। * * की कोई आवश्यकता नहीं है। मुझे लगता है।"

— स्वप्नेश

* *वंश तत्वों पर शैलियों को लागू करता है, न कि बाल तत्वों पर। बाल तत्व >आपके उदाहरण में होंगे, न कि स्थान। वंशज और बच्चा एक ही चीज नहीं हैं।

— BoltClock

Answer 5

चयन यही कारण है कि सभी तत्वों को ठीक उसी तरह एक और तत्व के अंदर नेस्टेड div aसभी का चयन करेंगे <a>तत्वों एक अंदर नेस्टेड कहीं <div>तत्व।