CSS में * और * | * के बीच अंतर क्या है?

211

CSS में, *किसी भी तत्व से मेल खाएगा।

सभी तत्वों से मेल खाने के *|*बजाय अक्सर उपयोग किया जाता है *। यह आम तौर पर परीक्षण प्रयोजनों के लिए उपयोग किया जाता है।

*और *|*CSS में क्या अंतर है ?

css css-selectors namespaces

— RockPaperLizard
स्रोत

1

इसी तरह के सवाल: सीएसएस में क्या *|*मतलब है?

— फ़्लिम

215

W3C चयनकर्ता के अनुसार :

सार्वभौमिक चयनकर्ता एक वैकल्पिक नाम स्थान घटक की अनुमति देता है। इसका उपयोग इस प्रकार किया जाता है:

ns|*
namepace ns में सभी तत्व

*|*
सभी तत्व

|*
बिना नाम के सभी तत्व

*
यदि कोई डिफ़ॉल्ट नाम स्थान निर्दिष्ट नहीं किया गया है, तो यह * | * के बराबर है। अन्यथा यह ns के बराबर है। * जहाँ ns डिफ़ॉल्ट नाम स्थान है।

तो, नहीं *और *|*हमेशा समान नहीं होते हैं। यदि एक डिफ़ॉल्ट नाम स्थान प्रदान किया गया है तो *केवल उन तत्वों का चयन करता है जो उस नाम स्थान का हिस्सा हैं।

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

@namespace "http://www.w3.org/2000/svg";

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

स्निपेट का विस्तार करें

नीचे दिए गए स्निपेट में कोई डिफ़ॉल्ट नामस्थान परिभाषित नहीं है और इसलिए दोनों *और *|*सभी तत्वों पर लागू होते हैं और इसलिए उन सभी को बेज पृष्ठभूमि और काली सीमा दोनों मिलते हैं। दूसरे शब्दों में, वे उसी तरह से काम करते हैं जब कोई डिफ़ॉल्ट नाम स्थान निर्दिष्ट नहीं किया जाता है।

* {
  background: beige;
}
*|* {
  border: 1px solid;
}

<a href="#">This is some link</a>

<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="#">
    <text x="20" y="20">This is some link</text>
  </a>
</svg>

स्निपेट का विस्तार करें

जैसा कि बोल्टकॉक टिप्पणियों ( 1 , 2 ) में इंगित करता है , शुरू में नामस्थान केवल एक्सएमएल, एसवीजी आदि जैसे एक्सएमएल आधारित भाषाओं पर लागू होते थे, लेकिन नवीनतम चश्मा के अनुसार, सभी एचटीएमएल तत्व (यानी, एचटीएमएल नेमस्पेस में तत्व) नामांकित हैं http://www.w3.org/1999/xhtml। फ़ायरफ़ॉक्स इस व्यवहार का अनुसरण करता है और यह सभी HTML5 उपयोगकर्ता एजेंटों के अनुरूप है। आप इस उत्तर में अधिक जानकारी पा सकते हैं ।

— सताना
स्रोत

4

क्या नामस्थान केवल XHTML या HTML पर भी लागू होते हैं?

— फ्लिम

8

@ फ़ीलम: केवल XML- आधारित भाषाएँ, जैसे XHTML और SVG। लेकिन ध्यान दें कि कुछ ब्राउज़र्स, जैसे फ़ायरफ़ॉक्स (दूसरों के बारे में निश्चित नहीं), सीएसएस के प्रयोजनों के लिए, टेक्स्ट / html में भी एक्सएचटीएमएल नामस्थान लागू करते हैं। उदाहरण के लिए देखें jsfiddle.net/BoltClock/5ta6yvvc , और अधिक जानकारी के लिए यह उत्तर दें ।

— BoltClock

3

परिशिष्ट - फ़ायरफ़ॉक्स का व्यवहार कल्पना से है, और सभी HTML5 उपयोगकर्ता एजेंटों के अनुरूप है। सभी HTML तत्वों (में यानी तत्वों एचटीएमएल नाम स्थान ) को namespaced कर रहे हैंhttp://www.w3.org/1999/xhtml

— BoltClock

44

*|*"किसी भी नामस्थान में सभी तत्वों" के चयनकर्ता का प्रतिनिधित्व करता है। W3C के अनुसार , चयनकर्ता में विभाजित है:

एनएस | ई

जहाँ ns नाम स्थान है और E तत्व है। डिफ़ॉल्ट रूप से, कोई नामस्थान घोषित नहीं किए जाते हैं। इसलिए जब तक किसी नाम स्थान को स्पष्ट रूप से घोषित नहीं किया जाता है, *|*और *वे समान तत्वों का चयन करेंगे।

— डैनियल हिगुएरस
स्रोत

-3

CSS में, * किसी भी एलिमेंट से मेल खाएगा।

| चुनिंदा विशिष्ट तत्वों का मिलान करने के लिए उपयोग किया जाता है । दोनों चयनकर्ता हमारे परीक्षण उद्देश्य के लिए उपयोग किए जाते हैं

— के आर राजा
स्रोत

2

क्या आप एक उदाहरण प्रदान कर सकते हैं?

— बजे बेन लेगियरियो