सीएसएस - सार्वभौमिक '*' चयनकर्ता बनाम एचटीएमएल या बॉडी चयनकर्ता का उपयोग करें?

Question

बॉडी टैग के लिए शैलियों को लागू करना पूरे पृष्ठ पर लागू किया जाएगा, इसलिए

body { font-family: Verdana }

पूरे पृष्ठ पर लागू किया जाएगा। इसके साथ भी किया जा सकता है

* {font-family: Verdana} 

जो सभी तत्वों पर लागू होगा और ऐसा ही प्रभाव पड़ेगा।

मैं इस सिद्धांत को समझता हूं कि पहली बार शैली को पूरे पृष्ठ के लिए एक टैग, निकाय पर लागू किया जा रहा है जबकि दूसरे उदाहरण में प्रत्येक व्यक्तिगत HTML तत्वों के विरुद्ध फ़ॉन्ट को लागू किया जा रहा है। मैं जो पूछ रहा हूं वह यह है कि ऐसा करने में व्यावहारिक अंतर क्या है, इसके निहितार्थ क्या हैं और एक कारण, स्थिति या सर्वोत्तम अभ्यास क्या है जो एक दूसरे का उपयोग करने की ओर जाता है।

एक पक्ष प्रभाव निश्चित रूप से गति (+1 रोब) है। मैं कार्यक्षमता के मामले में दूसरे को चुनने के लिए वास्तविक कारण में सबसे अधिक दिलचस्पी रखता हूं।

Comments

संभव क्रॉस साइट डुप्लिकेट: stackoverflow.com/questions/7187569/…

— Ciro Santilli 冠状::: 审查

Answer 1

CSS चयनकर्ता के इन दो विकल्पों के बीच कार्यात्मक अंतर ... (मेरा लेना)

तन

• शरीर के तत्व के लिए शैली के गुणों को लागू करता है।
• शरीर के भीतर के तत्व संपत्ति के मूल्यों को प्राप्त कर सकते हैं। कुछ गुण 'इनहेरिट' करने के लिए डिफ़ॉल्ट हैं।
• शैली की घोषणाएं जो शरीर के भीतर एक तत्व से मेल खाती हैं, विरासत में मिली शैली को ओवरराइड कर सकती हैं।

यूनिवर्सल चयनकर्ता * (सभी तत्व)

• सभी व्यक्तिगत तत्वों के लिए शैली गुण लागू करता है।
• विरासत में मिली शैली के गुण और डिफ़ॉल्ट 'प्रारंभिक मूल्य' को बदल देता है। वंशानुक्रम को अवरुद्ध करता है।
• अन्य, एक तत्व से मेल खाने वाले अधिक विशिष्ट सीएसएस चयनकर्ता * द्वारा लागू शैली गुणों को प्रतिस्थापित करेंगे।

सुझाव

1. उन तत्वों के लिए बॉडी का उपयोग करें जो डिफ़ॉल्ट रूप से विरासत में लेते हैं, जैसे कि फ़ॉन्ट, रंग, तत्वों के लिए एक समझदार डिफ़ॉल्ट मान प्रदान करने के लिए, हर मामले के लिए स्पष्ट रूप से कोड की आवश्यकता को कम करना, और शरीर के नीचे के निचले स्तर पर निहित तत्वों की क्षमता को संरक्षित करना। अपने माता-पिता से विरासत में।
2. संभवतः इस मामले में यूनिवर्सल चयनकर्ता * का उपयोग न करना बेहतर है। यह शरीर के भीतर अन्य तत्वों के बीच वंशानुक्रम को बाधित करता है, और आपको क्षतिपूर्ति करने के लिए अधिक सीएसएस नियम लिखने के लिए मजबूर कर सकता है। यह पृष्ठों के धीमे प्रतिपादन का एक कारक हो सकता है। यह पृष्ठ के आकार और सामग्री पर निर्भर करता है और कितने सीएसएस नियम हैं।

Answer 2

कुछ इस तरह की कोशिश करो

body { font-family: Verdana }
table { font-family: Arial }

विरुद्ध

* { font-family: Verdana }
table { font-family: Arial }

और देखें कि कौन सी शैलियाँ तालिका की कोशिकाओं पर लागू होती हैं।

जब आप कैस्केडिंग स्टाइलशीट के साथ काम कर रहे होते हैं, तो "पूरे दस्तावेज़ पर लागू" और "दस्तावेज़ के प्रत्येक तत्व पर लागू" के बीच अंतर होता है ।

एक कैस्केडिंग शैली को शरीर पर लागू करना शरीर के भीतर सभी टैग पर लागू होता है जब तक कि एक टैग इसे अधिलेखित नहीं करता है। फिर उस एक के भीतर सभी टैग के लिए ओवरराइट की गई शैली लागू होती है।

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

अधिकांश गैर-कैस्केडिंग शैलियों में भी वंशानुक्रम का मान होता है (उदा। margin: inherit), जिसका अर्थ है "मूल टैग का मान लें"।

Comments

+1 धन्यवाद। क्या अंतर केवल तालिकाओं के बारे में है? मैं एक उत्तर को स्वीकार करना चाहता हूं जो थोड़ा अधिक निश्चित या वर्णनात्मक है कि अन्य तत्वों के साथ अलग-अलग व्यवहार किया जाता है, जैसा कि तालिकाओं के साथ देखा जाता है। अतिरिक्त कारणों या स्थितियों के कारण एक या दूसरे से भी अच्छा होगा।

— माइकल डुरंट

@ मिचेल ड्यूरेंट: नहीं, यह एक डिव के भीतर समान रूप से लागू होता है। हालांकि, यह ध्यान दिया जाना चाहिए कि कुछ शैलियों, जैसे कि मार्जिन और पैडिंग, बाल तत्वों को कैस्केड नहीं करते हैं। उन लोगों के लिए, आपको सब कुछ लागू करने के लिए * का उपयोग करना चाहिए, लेकिन आप शायद ही कभी ऐसा करना चाहते हैं।

— pdr

Answer 3

मैं पूरा विवरण भूल गया हूं, लेकिन * चयनकर्ता के साथ, प्रदर्शन धीमा हो जाता है क्योंकि प्रत्येक तत्व का मूल्यांकन हो जाता है क्योंकि ब्राउज़र सीएसएस को पार्स करता है और शैली को लागू करता है। iirc, फ़ॉन्ट सेट करना, इस मामले में, केवल माता-पिता के लिए प्रत्येक तत्व के लिए एक संदर्भ बनाता है और अतिरिक्त काम की आवश्यकता नहीं होती है।

कुछ अन्य मुद्दे भी हैं, लेकिन, फिर से, मैं उन सभी को याद नहीं करता हूं और वर्षों में * का उपयोग नहीं किया है।

Answer 4

अच्छे सीएसएस डिजाइन के लिए सामान्य दिशानिर्देश जितना संभव हो उतना विशिष्ट होना चाहिए, लेकिन अधिक नहीं।

इसलिए, आपके उदाहरण में, शैली को शरीर के तत्व पर लागू करना जितना संभव हो उतना विशिष्ट होगा और निश्चित रूप से '*' चयनकर्ता की तुलना में अधिक विशिष्ट होगा।

Answer 5

जैसा कि दूसरों ने उल्लेख किया है, body { font-family: Verdana }फॉन्ट वेडेना को केवल उन तत्वों को चुनेंगे जो अपने माता-पिता से संपत्ति का वारिस करते font-styleहैं जैसे कि इसके सभी माता-पिता भी संपत्ति के अंतिम रूप को प्राप्त करते हैं bodyऔर तत्व को बनाते हैं , और सभी तत्वों के * {font-family: Verdana}लिए फॉन्ट वेरडेना का चयन करेंगे । मैं एक उदाहरण के साथ अंतर को स्पष्ट करना चाहता हूं:

शरीर चयनकर्ता का उपयोग करना:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

यूनिवर्सल सेलेक्टर का उपयोग करना *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

उदाहरणों के css और html कोडों का उपयोग करें जिन्हें आप पहचानेंगे कि <input>तत्व फॉन्ट-स्टाइल को बिल्कुल भी इनहेरिट नहीं करता है और इसलिए जो भी आप फॉर्म में टाइप करते हैं वह यूजर-एजेंट स्टाइल शीट के डिफ़ॉल्ट फॉन्ट-स्टाइल को प्राप्त करता है। दूसरे उदाहरण में सार्वभौमिक चयनकर्ता *तत्व सहित प्रत्येक तत्व के लिए स्पष्ट रूप से फ़ॉन्ट-शैली सेट करता inputहै।