सीएसएस

Question

के साथ नेस्टेड तत्वों को लक्षित करना मान लें कि मेरे पास कुछ गहरा घोंसला वाला मार्कअप है जिसे मैं सीएसएस के साथ लक्षित करना चाहता हूं। यह कुछ भी हो सकता है, लेकिन उदाहरण के लिए:

<div> 
    <div id='someid'> 
     <span class='someclass'> 
      <a class='link' href='alink'>Go somewhere</a> 
     </span> 
    </div> 
<div> 

यह एक CSS नियम <a> टैग को लक्षित सीधे, इस तरह लिखने के लिए स्वीकार्य है?

a.link { font-size: large; } 

या क्या यह गैर-मानक माना जाता है जो कुछ ब्राउज़रों में विफल हो सकता है? क्या मुझे इस तरह की श्रृंखला में प्रत्येक तत्व को लक्षित करने की ज़रूरत है?

div div span.someclass a.link { font-size: large; } 

Answer 1

दोनों उपयोग करने के लिए पूरी तरह स्वीकार्य हैं और उत्तर आपके विशिष्ट समाधान पर निर्भर करता है। उदाहरण के लिए यदि आपके पास अन्य क्षेत्र हैं जहां आप सामान्य गुण साझा कर रहे हैं जिन्हें उस वर्ग द्वारा परिभाषित किया गया है, तो आप इसे यथासंभव सामान्य रखना चाहते हैं। उदाहरण के लिए यदि आप एक नेविगेशन और उस क्षेत्र में लिंक कुछ आम तत्व उन में परिभाषित किया जा सकता है का हिस्सा अपने नेस्टेड html में से a.link

तब है, तो आप उस पाठ छोटा करने के लिए

.someclass a.link {font-size:8px} की तरह कुछ कर सकता है। http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

जितना अधिक लक्षित आप अपने सीएसएस को कम लचीला बनाते हैं। यह आपका खुद का व्यापार है। यदि आप इस तरह के एक विशिष्ट वर्ग को लिंक देने जा रहे हैं, तो मुझे पूरा यकीन है कि वे दृढ़ता से वही होंगे जैसे वे इस पेड़ के अंदर या उसके बाहर दिखाई देते हैं ताकि आप अपने पहले उदाहरण के साथ रह सकें।

Answer 3

a.link इसे करने का सबसे अच्छा तरीका है। यदि आप एक निश्चित ए.लिंक को बाकी से अलग करना चाहते हैं, तो आपको इसमें कुछ वज़न जोड़ना होगा।

a.link { ... } /* Global */ 
span.someclass a.link { ... } /* Finds all a.link within span.someclass */ 

वंशज चयनकर्ताओं (लाइन 2) सबसे कारगर तरीका एक तत्व के लिए शैली को जोड़ने, इसलिए उन्हें किफ़ायत से उपयोग करने के लिए नहीं हैं। निजी तौर पर, मैं उनको उपयोग करता हूं जब मुझे किसी निश्चित आईडी/कक्षा के भीतर वैश्विक कक्षा में विशेष शैलियों की आवश्यकता होती है।

Answer 4

यह वास्तव में लंबे समय तक, बदसूरत दूसरा विकल्प है, जो विशिष्टता और प्रदर्शन के मुद्दों पैदा कर सकता है के बजाय a.link उपयोग करने के लिए अनुशंसा की जाती है:

यहाँ एक लेख है कि चर्चा विशिष्टता काम करता है।

यदि आप केवल .link का उपयोग करते हैं तो यह बेहतर होता है। यह सबसे अच्छा विकल्प है।

Answer 5

दोनों पूरी तरह से मान्य हैं, और आप जो भी उपयोग करते हैं उस पर निर्भर करता है कि आप क्या करना चाहते हैं।

आप एक सामान्य वर्ग है कि आप तत्व और की परवाह किए बिना अपने पूरे साइट भर में उपयोग करने के लिए सक्षम होने के लिए जहां तत्व, आपको चाहिए केवल उपयोग .class है चाहता हूँ बना रहे हैं। इसके लिए एक अच्छा उदाहरण .icon जैसा कुछ है जो आप लिंक, सूची आइटम, शीर्षलेख इत्यादि पर उपयोग करना चाह सकते हैं और आप उन्हें हर जगह का उपयोग करने में सक्षम होना चाहते हैं।

यदि आप एक वर्ग बना रहे हैं जो केवल एक निश्चित प्रकार तत्व पर विशिष्ट/काम करता है, तो चयनकर्ता में तत्व का भी उपयोग करना सबसे अच्छा है।इसका एक उदाहरण एक बुलेट सूची होगी जिसे आप एक पंक्ति पर प्रदर्शित करना चाहते हैं, क्योंकि इस कक्षा को HTML को <ul> होने की आवश्यकता है, आपको इसे सीएसएस में भी निर्दिष्ट करना चाहिए; ul.inline। इस तरह आप दोनों तत्वों को प्रभावित करने वाली स्टाइल के बिना, अन्य तत्वों के लिए "इनलाइन" कक्षा का नाम भी उपयोग कर सकते हैं।

यदि आप तत्व का चयन करने के लिए केवल कक्षा का उपयोग कर रहे हैं, लेकिन इसमें कोई सामान्य स्टाइल नहीं होना चाहिए जो आपको विशिष्ट होना चाहिए। उदाहरण के लिए, आप अपने #blog-post तत्व में पहले पैराग्राफ को बड़ा होने के लिए चाहते हैं, तो आपको #blog-postऔर कक्षा दोनों निर्दिष्ट करना चाहिए; #blog-post p.first (ध्यान दें कि :first-of-type, h2 + p आदि जैसे उन्नत चयनकर्ताओं के लिए इन प्रकार के वर्गों की शायद ही कभी आवश्यकता है)।

कह रहा है कि ".link सबसे अच्छा है, a.link दूसरा सबसे अच्छा और लंबा चयनकर्ता खराब है" बस गलत है। सब कुछ परिस्थिति पर निर्भर करता है।