सीएसएस विजेता चयनकर्ता के हो?

एचटीएमएल कागजातको संरचना परिवारको रूख जस्तो छ। तपाईंको परिवारमा, तपाईंसँग आमाबाबु र अरुहरू जो तपाई सामु अघि आउनुभयो। यी तपाईंका पुर्खाहरू हुन्। छोराछोरी र ती वृक्षमा तपाईंको पछि लाग्ने तपाईंका सन्तान हुन्। HTML समान समान काम गर्दछ। अन्य तत्वहरू भित्रका तत्वहरू तिनीहरूका सन्तान हुन्। उदाहरणका लागि, लगभग हरेक एचटीएमएल तत्व ट्याग भित्र छ, तिनीहरू त्यो <शरीर> तत्वहरूको सन्तान हुनेछ। यस सम्बन्धलाई बुझ्न महत्त्वपूर्ण छ जब तपाईं सीएसएससँग काम सुरु गर्नुहुन्छ र भिडीयो शैलीहरू लागू गर्न विशिष्ट तत्वहरूलाई लक्षित गर्न आवश्यक छ।

CSS प्रासंगिक चयनकर्ताहरू

एक सीएसएस सन्तान चयनकर्ता तत्वहरू जुन अन्य तत्व भित्र (या अधिक सही भनिन्छ, एउटा तत्व जुन अर्को तत्वको सन्तान हो) भित्र हुन्छ। उदाहरणको लागि, एक अज्ञात सूचीमा ट्यागहरूसँग सन्तानको रूपमा ट्यागको ट्याग छ। निम्न HTML को उदाहरणको रूपमा प्रयोग गरौं:

• यो एउटा लिङ्क

  लिप ट्यागहरू यूएल ट्यागको सन्तान हुन्। ट्याग दुवै लाइट (बच्चा सन्तान) र उल (पोर्चुगल सन्तान) ट्यागको सन्तान हो। यदि तपाइँ परिवारको रूख उदाहरण प्रयोग गरेर सोच्नु हुन्छ भने,

  अभिभावक हुनेछ,
  • त्यो तत्वको बच्चा हुनेछ, र
  • को बच्चा हुनेछ र पोर्चुगल
    ।

    त्यसोभए तपाइँ यी सन्तान छनौटहरू प्रयोग गरी वेब पृष्ठमा कसरी निर्दिष्ट तत्वहरू लक्षित गर्नुहुन्छ? पहिला, तपाइँले दुई (वा धेरै) रिक्त स्थानहरूद्वारा विभाजित प्रकार चयनकर्ताहरू प्रयोग गरी सन्तान चयनकर्ताहरू परिभाषित गर्नुपर्दछ।

    li a {text-decoration: none; }

    त्यस उदाहरणमा, शैलीहरू केवल लिङ्क तत्वमा लागू हुनेछन् () कि सूची वस्तु तत्वको सन्तान (

    • ) हो। पृष्ठमा रहेका अन्य सबै लिंकहरू जुन सूची वस्तुको सन्तान होइन यो शैली पाउनेछैन।

      सम्झना एक महत्त्वपूर्ण कुरा हो कि यसले तपाईंको सन्तान चयनकर्तामा प्रयोग हुने ट्यागहरू बीच कति ट्यागहरू फरक गर्दैन। यदि पहिलो तत्त्व पहिलो तत्व भित्र बन्द गरिएको छ भने यो सन्तानको रूपमा चयन गरिनेछ।

      यदि तपाईं उल तत्वहरूबाट घटाइएको सबै लंगरहरू चयन गर्न चाहनुहुन्छ भने, तपाईंले लेख्नुभयो:

      ul a {text-decoration: none; }

      अब, यो शैलीहरू कुनै पनि लिङ्कमा लागू हुनेछ जुन सूची वस्तुको सन्तान हो। तपाईले यो चयनकर्ता पनि लेख्न सक्नुहुनेछ

      ul li a {text-decoration: none; }

      यो एक सन्तान चयनकर्ता हो जसले दुई भन्दा बढी प्रकार चयनकर्ताहरू प्रयोग गर्दछ। यस अवस्थामा, यो लिङ्कहरूमा लागू हुनेछ जुन सूची-वस्तु भित्र र एक अङ्कित सूची भित्र पनि।

      कक्षा चयनकर्ता र आईडी चयनकर्ताहरूको प्रयोग गर्दै

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

      #billboard ul {पृष्ठभूमि रंग: #ccc; }

      यसले "अर्डर" को आईडीको साथ एक तत्वको सन्तानलाई अङ्कित सूचीबद्ध गर्दछ। तपाईं कक्षा मानहरूको लागि पनि गर्न सक्नुहुन्छ।

      div.billboard ul {पृष्ठभूमि रंग: #ccc; }

      यसले मानिन्छ कि विभाजनको "बिलबोर्ड" को क्लास मान छ। माथिको सीएसएसले यस वर्गको मानमा कुनै पनि डिभीजन भित्र

      तत्त्व ढाँचा गर्नेछ।

      तपाईं उजुरी चयनकर्ताहरूसँग साँच्चै भारी हात र verbose प्राप्त गर्न सक्नुहुन्छ। उदाहरणका लागि, यदि तपाइँ Dreamweaver लाई तपाइँको एचटीएमएल कोड लेख्न प्रयोग गर्नुहुन्छ, तपाईले नयाँ CSS नियमहरू थप्दा एक सेटिङ हो जुन पृष्ठमा तपाईंको कर्सरको स्थानमा आधारित चयनकर्ता स्वत: सिर्जना हुनेछ। यस Dreamweaver ले यस उदाहरणहरुमा एक जंगली verbose र लामो सन्तान चयनकर्ता सिर्जना गर्दछ। त्यो धेरै विशिष्टता तपाईंको CSS काम गर्न आवश्यक छैन। तपाईं के गर्न चाहानुहुन्छ एक सन्तान को एक सन्तान को बीच एक संतुलन जो एकदम विशिष्ट छ को बीच एक संतुलन पाछन ताकि तपाईं को आवश्यकता हो जो सटीक तत्वों को आवश्यकता हो (बिना स्टाइल जो तपाईं प्रभावित नहीं चाहते बिना) को चयन को बिना सीएसएस नियम बिना ठूलो।