CSS चयनकर्ता में Asterisk (*) क्या करता है?

98

मुझे यह CSS कोड मिला और मैंने यह देखने के लिए इसे चलाया कि यह क्या करता है और इसने पृष्ठ पर हर तत्व को रेखांकित किया,

क्या कोई समझा सकता है कि CSS में Asterisk * क्या करता है?

<style>
* { 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 }
</style>

css css-selectors

— JasonDavis
स्रोत

@ सोंसंडवीस - यह प्रश्न आपके कोड के लिए विशिष्ट है या मैं सिर्फ एक नया प्रश्न पूछूंगा। क्या आपका पृष्ठ विभिन्न रंगों के साथ कई रूपरेखा प्रदर्शित करता है? एक ही तरीका है कि मैं अलग-अलग रंगों का उत्पादन कर सकता हूं यदि मैं एक टैग निर्दिष्ट करता हूं तो * IE div * { outline ...}और * { outline ... }। यदि मैं उपयोग करता हूं * { outline ... }और * * { outline ... }केवल अंतिम सीएसएस विवरण का उपयोग किया जाता है।

— JabberwockyDecompiler

95

यह एक वाइल्डकार्ड है, इसका मतलब यह है कि यह DOM के उस हिस्से के सभी तत्वों का चयन करेगा।

उदाहरण के लिए, यदि मैं अपने संपूर्ण पृष्ठ पर हर तत्व पर मार्जिन लागू करना चाहता हूं, तो आप इसका उपयोग कर सकते हैं:

* {
    margin: 10px;
}

आप इसका उपयोग उप-चयनों के भीतर भी कर सकते हैं, उदाहरण के लिए निम्नलिखित एक अनुच्छेद टैग के भीतर सभी तत्वों के लिए एक मार्जिन जोड़ देगा:

p * {
    margin: 10px;
}

आपका उदाहरण तत्वों को कई रंगीन सीमाओं को देने के लिए लगातार सीमाओं और मार्जिन को लागू करने के लिए कुछ सीएसएस चालबाजी कर रहा है। उदाहरण के लिए, एक काली सीमा से घिरा एक सफेद सीमा।

— Soviut
स्रोत

p *केवल उपयोग करने के विपरीत उपयोग करने का क्या फायदा है p?

— सोलोमन क्लॉसन

7

कोई "लाभ" नहीं है, यह है कि आप pटैग के अंदर सभी वंशजों का चयन कैसे करते हैं । तो अगर आप एक था span, b, strong, imgअपने पैराग्राफ के अंदर, आदि, यह उन का चयन करें और उन्हें शैलियों लागू होगा।

— सोवियत संघ

30

आपके द्वारा संदर्भित CSS वेब पेज-डिज़ाइन की डिबगिंग समस्याओं के लिए वेब-डिज़ाइनर के लिए बहुत उपयोगी है। मैं अक्सर इसे पृष्ठ में अस्थायी रूप से छोड़ देता हूं, इसलिए मैं सभी पृष्ठ तत्वों का आकार देख सकता हूं और नीचे ट्रैक कर सकता हूं, उदाहरण के लिए, जिसके पास बहुत अधिक पैडिंग है जो अन्य तत्वों को जगह से बाहर निकाल रहा है।

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

— टॉम
स्रोत

2

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

— लॉरेंस Dol

@SoftwareMonkey - हाँ, इन दिनों यह सच है। बिल्ड-इन इंस्पेक्टर महान हैं। उदाहरण के लिए, मैं Chrome का उपयोग करता हूं और Ctrl+Shift+cफिर किसी तत्व पर क्रोम करता हूं और Chrome पृष्ठभूमि को रंग देता है। सीएसएस में इस तारांकन स्टाइल को छोड़ने की तुलना में बहुत तेज है।

— टॉम

1

हालाँकि सोवियट का उत्तर सही है, इस उत्तर को सही उत्तर के रूप में चिह्नित किया जाना चाहिए, coz यह पूछे गए प्रश्न का सटीक उत्तर है।

— बिली सैमुअल

4

* एक वाइल्डकार्ड है। इसका मतलब यह है कि यह शैली को किसी भी HTML तत्व पर लागू करेगा। अतिरिक्त * की शैली को घोंसले के शिकार के स्तर पर लागू करें।

यह चयनकर्ता तत्वों के घोंसले के स्तर के आधार पर, एक पृष्ठ के सभी तत्वों पर अलग-अलग रंग की रूपरेखा लागू करेगा।

— futureelite7
स्रोत

4

* वाइल्डकार्ड के रूप में कार्य करता है, ज्यादातर अन्य उदाहरणों की तरह।

यदि तुम करो:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

फिर सभी HTML तत्वों में वे शैलियाँ होंगी।

— माइक ट्रैपिक
स्रोत

0

अपनी स्टाइलशीट में, सामान्य रूप से आपको सभी तत्व जैसे कि फॉन्ट-साइज़ एट्रिब्यूट और मार्जिन के लिए बुनियादी नियम को परिभाषित करने की आवश्यकता होती है। {font-size: 14px; मार्जिन: 0; गद्दी: 0;} / तत्वों पर ब्राउज़र की डिफ़ॉल्ट सेटिंग के अलावा, सभी पाठ फ़ॉन्ट आकार को 14 पिक्सेल आकार के रूप में शून्य मार्जिन और पैडिंग के साथ एच 1, ... पूर्व सहित प्रदान किया जाएगा। * /

— मिकेल ब्रैडली बेंजामिन
स्रोत