css - सीएसएस में शैलियों का एक सेट घोषित करते समय "।" और "#" के बीच क्या अंतर है?





css-selectors (9)


हाँ, वे अलग हैं ...

# एक आईडी चयनकर्ता है , जो एक विशिष्ट आईडी के साथ एक विशिष्ट तत्व को लक्षित करने के लिए प्रयोग किया जाता है, लेकिन। एक वर्ग चयनकर्ता है जो किसी विशेष वर्ग के साथ कई तत्वों को लक्षित करने के लिए उपयोग किया जाता है। दूसरे तरीके से रखने के लिए:

  • #foo {} एक विशेषता id="foo" साथ घोषित एकल तत्व को स्टाइल करेगा
  • .foo {} एक विशेषता class="foo" साथ सभी तत्वों को स्टाइल करेगा (आपके पास तत्व को असाइन किए गए कई वर्ग भी हो सकते हैं, बस उन्हें रिक्त स्थान से अलग करें, जैसे class="foo bar" )

विशिष्ट उपयोग

आम तौर पर, आप जो कुछ जानते हैं उसे स्टाइल करने के लिए # का उपयोग केवल एक बार दिखाई देने वाला है, उदाहरण के लिए, उच्च स्तरीय लेआउट जैसे चीजें जैसे साइडबार, बैनर क्षेत्र इत्यादि।

कक्षाओं का उपयोग किया जाता है जहां शैली दोहराई जाती है, उदाहरण के लिए आप त्रुटि संदेश के लिए हेडर का एक विशेष रूप सिर कहते हैं, आप एक शैली h1.error {} बना सकते हैं जो केवल <h1 class="error"> लागू होगा <h1 class="error">

विशेषता

एक और पहलू जहां चयनकर्ता भिन्न होते हैं उनकी विशिष्टता में - एक आईडी चयनकर्ता वर्ग चयनकर्ता से अधिक विशिष्ट माना जाता है। इसका अर्थ यह है कि शैलियों पर तत्व कहां से conflict करते हैं, अधिक विशिष्ट चयनकर्ता के साथ परिभाषित किए गए लोग कम विशिष्ट चयनकर्ताओं को ओवरराइड करेंगे। उदाहरण के लिए, दिए गए <div id="sidebar" class="box"> #sidebar लिए कोई भी नियम .box लिए विरोधाभासी नियमों को ओवरराइड करने के साथ

सीएसएस चयनकर्ताओं के बारे में और जानें

सीएसएस चयनकर्ताओं पर अधिक महान प्राइमरों के लिए Selectutorial - वे अविश्वसनीय रूप से शक्तिशाली हैं, और यदि आपकी धारणा केवल "# Selectutorial लिए उपयोग की जाती है" तो आपको सीएसएस का अधिक प्रभावी ढंग से उपयोग करने के तरीके पर पढ़ने के लिए अच्छा करना होगा।

# और के बीच क्या अंतर है . किसी तत्व के लिए शैलियों का एक सेट घोषित करते समय और कौन से अर्थों का उपयोग करने का निर्णय लेते समय अर्थशास्त्र में क्या होता है?




# मतलब है कि यह किसी तत्व की id से मेल खाता है। द . कक्षा का नाम दर्शाता है:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

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




यह ध्यान देने योग्य भी है कि cascade , एक आईडी ( # ) चयनकर्ता अब ( . ) चयनकर्ता से अधिक specific है। इसलिए, आईडी स्टेटमेंट में नियम कक्षा विवरण में नियमों को ओवरराइड करेंगे।

उदाहरण के लिए, यदि निम्नलिखित दोनों कथन:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

एक ही HTML तत्व पर लागू होते हैं:

<h1 id="specials" class="headline">Today's Specials</h1>

रंग: नीला नियम रंग को ओवरराइड करेगा : लाल नियम।




डॉट ( . ) एक वर्ग नाम को इंगित करता है जबकि हैश ( # ) किसी विशिष्ट आईडी विशेषता वाले तत्व को दर्शाता है। कक्षा उस विशेष वर्ग से सजाए गए किसी भी तत्व पर लागू होगी, जबकि # शैली केवल उस विशेष आईडी के साथ तत्व पर लागू होगी।

कक्षा का नाम:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

नामित तत्व:

<style>
   #name { ... }
</style>

<div id="name"></div>



# एक आईडी चयनकर्ता है। यह केवल मिलान करने वाले आईडी वाले तत्वों से मेल खाता है। अगला स्टाइल नियम उस तत्व से मेल खाएगा जिसमें "हरी" के मान के साथ एक आईडी विशेषता है:

#green {color: green}

अधिक जानकारी के लिए http://www.w3schools.com/css/css_syntax.asp देखें




यहां टी नियमों को समझाने का मेरा .style है। .style और #style एक मैट्रिक्स का हिस्सा हैं। अगर सही क्रम में नहीं है, तो वे एक दूसरे को ओवरराइड कर सकते हैं, या संघर्ष का कारण बन सकते हैं।

लाइन अप यहाँ है।

मैट्रिक्स

#style 0,0,1,0 id

.style 0,1,0,0 class

यदि आप इन दोनों को ओवरराइड करना चाहते हैं तो आप <style></style> चुड़ैल का उपयोग मैट्रिक्स स्तर या 1,0,0,0. और @media क्वेरी की उपरोक्त सब कुछ ओवरराइड होगी ... मुझे इस बारे में निश्चित नहीं है लेकिन मुझे लगता है कि आईडी चयनकर्ता # केवल एक पृष्ठ में उपयोग किया जा सकता है।




बहुत ज्यादा पसंद है हर किसी ने पहले ही कहा है:

एक अवधि ( . ) एक वर्ग इंगित करती है, और एक हैश ( # ) एक आईडी इंगित करता है।

इसके बीच मौलिक अंतर यह है कि आप अपने पृष्ठ पर एक कक्षा का पुन: उपयोग कर सकते हैं, जबकि एक आईडी का उपयोग एक बार किया जा सकता है। यह निश्चित रूप से, यदि आप डब्ल्यूसी 3 मानकों पर चिपके हुए हैं।

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

यह भी ध्यान रखना उपयोगी है कि आईडी गुण श्रेणी गुणों को पार कर जाएंगे।




.class निम्नलिखित तत्व को लक्षित करता है:

<div class="class"></div>

#class निम्नलिखित तत्व को लक्षित करता है:

<div id="class"></div>

ध्यान दें कि आईडी पूरे दस्तावेज़ में अनूठी होनी चाहिए, जबकि किसी भी तत्व वर्ग को साझा कर सकता है।




मैं normalize.css पर काम करता हूं।

मुख्य मतभेद हैं:

  1. Normalize.css सब कुछ "unstyling" की बजाय उपयोगी डिफ़ॉल्ट संरक्षित करता है। उदाहरण के लिए, generalize.css (और वास्तव में अधिक मजबूत बनाये गये) के बाद sup या sub "बस काम करें" जैसे तत्व, जबकि वे reset.css सहित सामान्य पाठ से दृष्टिहीन रूप से अलग हैं। तो, normalize.css आपके ऊपर एक दृश्य प्रारंभ बिंदु (homogeny) लगा नहीं है। यह हर किसी के स्वाद के लिए नहीं हो सकता है। करने के लिए सबसे अच्छी बात यह है कि दोनों के साथ प्रयोग करें और देखें कि आपकी प्राथमिकताओं के साथ कौन से जेल हैं।

  2. Normalize.css कुछ सामान्य बग को ठीक करता है जो reset.css के दायरे से बाहर हैं। इसमें reset.css की तुलना में एक बड़ा दायरा है, और सामान्य समस्याओं के लिए बग फिक्स भी प्रदान करता है जैसे: एचटीएमएल 5 तत्वों के लिए प्रदर्शन सेटिंग्स, फॉर्म तत्वों द्वारा font विरासत की कमी, pre लिए font-size प्रतिपादन को सही करना, आईई 9 में एसवीजी ओवरफ्लो, और आईओएस में button स्टाइल बग।

  3. Normalize.css आपके देव उपकरण को अव्यवस्थित नहीं करता है। Reset.css का उपयोग करते समय एक सामान्य जलन एक बड़ी विरासत श्रृंखला है जो ब्राउज़र सीएसएस डिबगिंग टूल में प्रदर्शित होती है। लक्षित स्टाइलिंग के कारण सामान्यize.css के साथ ऐसा कोई मुद्दा नहीं है।

  4. Normalize.css अधिक मॉड्यूलर है। परियोजना अपेक्षाकृत स्वतंत्र वर्गों में विभाजित हो गई है, जिससे आप संभावित रूप से अनुभागों (जैसे फॉर्म सामान्यीकरण) को हटा सकते हैं, यदि आपको पता है कि उन्हें आपकी वेबसाइट द्वारा कभी आवश्यकता नहीं होगी।

  5. Normalize.css में बेहतर प्रलेखन है। सामान्यize.css कोड को गिटहब विकी में इनलाइन के साथ-साथ अधिक व्यापक रूप से दस्तावेज किया गया है । इसका अर्थ यह है कि आप यह पता लगा सकते हैं कि कोड की प्रत्येक पंक्ति क्या कर रही है, इसे क्यों शामिल किया गया था, ब्राउज़र के बीच मतभेद क्या हैं, और अधिक आसानी से अपने स्वयं के परीक्षण चलाते हैं। परियोजना का उद्देश्य लोगों को शिक्षित करने में मदद करना है कि ब्राउज़र डिफ़ॉल्ट रूप से तत्वों को कैसे प्रस्तुत करते हैं, और उनके लिए सुधार सबमिट करने में शामिल होना आसान बनाता है।

मैंने normalize.css के बारे में एक लेख में इसके बारे में अधिक जानकारी में लिखा है







css css-selectors