CSS में "क्या अंतर है" और "#" शैलियों का एक सेट घोषित करते समय?

Question

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

Answer 1

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

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

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

विशिष्ट उपयोग करता है

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

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

विशेषता

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

CSS चयनकर्ताओं के बारे में अधिक जानें

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

संपादित करें: ऐसा लगता है कि चयनकर्ता आकाश में बड़ी वेबसाइट पर गए होंगे, इसलिए इसके बजाय इस संग्रह लिंक को आज़माएं ।

Comments

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

— मील्स

@ माइल्स सही है - मुझे लगता है कि "ID" विशेषता को कहना / # लक्षित करना अधिक सटीक है, और "/" लक्ष्य "क्लास" है। हालाँकि ID अद्वितीय होनी चाहिए, लेकिन CSS इंजन उस या देखभाल को मान्य नहीं करता है।

— रेक्स एम

@Rex M - हालांकि यह उपयोगी है कि किसी एक तत्व को देखते हुए इसमें एक से अधिक आईडी नहीं हो सकते हैं चाहे वह अद्वितीय हो या नहीं। मैंने फ़ायरफ़ॉक्स के तहत यह कोशिश की और दो आईडी वाले तत्वों को अनदेखा किया गया। तत्वों में कई वर्ग हो सकते हैं।

— उसगी

क्या div.sidebar div #sidebar की तरह ही है?

— अली गजनी

चयनकर्ता लिंक खराब है :(

— Zeek2

Answer 2

इसका #मतलब है कि यह idएक तत्व से मेल खाता है । .वर्ग के नाम का प्रतीक है:

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


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

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

Answer 3

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

कक्षा का नाम:

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

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

नामित तत्व:

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

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

Comments

"नामित तत्व" भ्रामक है

— बॉबी जैक

@ बॉबी - तो जब आप किसी तत्व को एक आईडी देते हैं तो आप इसे क्या कहते हैं - 'आईडी-आईएनजी'?

— tvanfosson

मैं बॉबी से सहमत हूं - तत्वों का एक नाम और साथ ही एक आईडी हो सकता है। आप ऐसे तत्वों को क्या कहते हैं?

— जॉन मैक्लम

Answer 4

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

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

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

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

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

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

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

Answer 5

पहले से ही कहा गया है पर त्वरित एक्सटेंशन के एक जोड़े ...

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

उदाहरण के लिए, यह HTML उद्धरण दिया गया है:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

आप इन के साथ विभिन्न शैलियों को लागू कर सकते हैं:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

जानने के लिए एक और उपयोगी बात: आप एक तत्व पर कई कक्षाएं लगा सकते हैं, उन्हें अंतरिक्ष-परिसीमन करके ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

जो आपको .menuविशिष्ट स्टाइल का उपयोग करके .main.menuऔर के साथ आम स्टाइल करने की अनुमति देता है.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

Answer 6

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

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

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

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

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

Answer 7

बहुत ज्यादा की तरह हर कोई पहले से ही कहा गया है:

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

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

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

यह भी ध्यान रखना उपयोगी है कि आईडी प्रॉपर्टीज क्लास प्रॉपर्टीज को सुपरसेड करेगी।

Answer 8

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

#green {color: green}

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

Answer 9

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

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

आव्यूह

#style 0,0,1,0 id

.style 0,1,0,0 class

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