आसन्न सीएसएस चयनकर्ता। CSS में विशेष चयनकर्ता। आसन्न, बच्चा, प्रासंगिक और टैग विशेषता चयनकर्ता। विशेषता मान विशिष्ट पाठ के साथ समाप्त होता है
विवरण
वेब पेज के तत्वों को पड़ोसी कहा जाता है जब वे दस्तावेज़ कोड में तुरंत एक दूसरे का अनुसरण करते हैं।
वाक्य - विन्यास
ई + एफ (शैली नियमों का विवरण)
प्लस चिन्ह (+) का उपयोग पड़ोसी तत्वों की शैली को नियंत्रित करने के लिए किया जाता है, जिसे दो चयनकर्ताओं ई और एफ के बीच रखा जाता है। यह शैली एफ तत्व पर लागू होती है, लेकिन केवल अगर यह ई तत्व के निकट और इसके तुरंत बाद है। आइए कुछ उदाहरण देखें।
लोरम ipsum मातम बैठ जाओ।
टैग टैग का एक बच्चा है
क्योंकि यह इस कंटेनर के अंदर है। क्रमश:
माता-पिता के रूप में कार्य करता है .
लोरम ipsum मातम बैठिये अमेट।
टैग तथा ओवरलैप न करें और आसन्न तत्वों का प्रतिनिधित्व करें। तथ्य यह है कि वे कंटेनर के अंदर स्थित हैं उनके रवैये को प्रभावित नहीं करता है। lorem ipsum डोलर बैठो, consectetuer निगरानी बदलाव.
टैग यहाँ आसन्न हैं तथा , तथा तथा ... जिसमें तथा आसन्न तत्व इस तथ्य के कारण संबंधित नहीं हैं कि उनके बीच एक कंटेनर है .
एचटीएमएल 5 सीएसएस 2.1 आईई सीआर ओप सा एफएक्स
lorem ipsum डोलर बैठो, consectetuer आदत डालना।
लोरेन इपसाम डलार सिट आमेट, consectetuer आदत डालना।
इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 1।
चित्र: 1. आसन्न चयनकर्ताओं के लिए लाल पाठ रंग
ब्राउज़र्स
चयनकर्ताओं के बीच टिप्पणी (B + / * plus * / I) होने पर Internet Explorer 7 शैली नहीं करता है।
व्लाद मर्ज़ेविच
वेब पेज के तत्वों को पड़ोसी कहा जाता है जब वे दस्तावेज़ कोड में तुरंत एक दूसरे का अनुसरण करते हैं। आइए तत्व संबंधों के कुछ उदाहरणों को देखें।
लोरम ipsum मातम बैठ जाओ।
इस उदाहरण में, टैग टैग का एक बच्चा है
क्योंकि यह इस कंटेनर के अंदर है। क्रमश:
माता-पिता के रूप में कार्य करता है .
लोरम ipsum मातम बैठिये अमेट।
यहाँ टैग तथा ओवरलैप न करें और आसन्न तत्वों का प्रतिनिधित्व करें। तथ्य यह है कि वे कंटेनर के अंदर स्थित हैं किसी भी तरह से उनके रवैये को प्रभावित नहीं करता है। lorem ipsum डोलर बैठो, consectetuer निगरानी बदलाव.
टैग यहाँ आसन्न हैं तथा , तथा तथा ... जिसमें तथा आसन्न तत्व इस तथ्य के कारण संबंधित नहीं हैं कि उनके बीच एक कंटेनर है .
प्लस चिन्ह (+) का उपयोग आसन्न तत्वों की शैली को नियंत्रित करने के लिए किया जाता है, जिसे दो चयनकर्ताओं के बीच रखा जाता है। सामान्य सिंटैक्स निम्नानुसार है।
चयनकर्ता 1 + चयनकर्ता 2 (शैली नियमों का विवरण)
प्लस के आस-पास के स्थान वैकल्पिक हैं, शैली को चयनकर्ता 2 पर लागू किया जाता है, लेकिन केवल अगर यह चयनकर्ता 1 के निकट है और इसे तुरंत हटा दिया जाए।
उदाहरण 11.1 की संरचना से पता चलता है कि टैग एक दूसरे के साथ कैसे बातचीत करते हैं।
उदाहरण 11.1। आसन्न चयनकर्ताओं का उपयोग करना
एचटीएमएल 5 सीएसएस 2.1 आईई सीआर ओप सा एफएक्स
lorem ipsum डोलर बैठो, consectetuer आदत डालना।
लोरेन इपसाम डलार सिट आमेट, consectetuer आदत डालना।
उदाहरण परिणाम अंजीर में दिखाया गया है। 11.1।
चित्र: 11.1। आसन्न चयनकर्ताओं का उपयोग करके रंग के साथ पाठ हाइलाइट करना
यह उदाहरण कंटेनर की सामग्री के लिए पाठ का रंग बदलता है। जब कंटेनर के तुरंत बाद तैनात किया जाता है ... पहले पैराग्राफ में, यह स्थिति कार्यान्वित की जाती है, इसलिए ब्राउज़र में लाल रंग में "कंसेटेटेर" शब्द प्रदर्शित होता है। दूसरे पैराग्राफ में, हालांकि एक टैग है लेकिन कोई टैग नहीं है नहीं, इसलिए इस कंटेनर में कोई स्टाइल नहीं लगाया गया है।
आइए एक अधिक व्यावहारिक उदाहरण देखें। किसी लेख के पाठ में विभिन्न फुटनोट और नोट्स शामिल करना अक्सर आवश्यक होता है। आमतौर पर इस उद्देश्य के लिए एक नई शैली की क्लास बनाई जाती है और एक पैराग्राफ पर लागू की जाती है, ताकि आप आसानी से टेक्स्ट के स्वरूप को बदल सकें। लेकिन हम दूसरे रास्ते पर जाएंगे और पड़ोसी चयनकर्ताओं का उपयोग करेंगे। टिप्पणियों को हाइलाइट करने के लिए, एक नया वर्ग बनाएं, इसे सिक करें और टैग पर लागू करें
... ऐसी हेडिंग के बाद पहला पैराग्राफ बैकग्राउंड कलर और इंडेंटेशन (उदाहरण 11.2) के साथ हाइलाइट किया जाता है। बाकी पैराग्राफ अपरिवर्तित रहेंगे।
उदाहरण 11.2। पैराग्राफ शैली बदलें
एचटीएमएल 5 सीएसएस 2.1 आईई सीआर ओप सा एफएक्स
रेगिस्तान में शेर को पकड़ने के तरीके
अनुक्रमिक खोज विधि
बता दें कि शेर का समग्र आयाम एल एक्स डब्ल्यू एक्स एच है, जहां एल नाक की नोक से पूंछ के ब्रश तक शेर की लंबाई है, डब्ल्यू शेर की चौड़ाई है, और एच इसकी ऊंचाई है। फिर हम रेगिस्तान को प्राथमिक आयतों की एक श्रृंखला में विभाजित करते हैं, जिनमें से आकार शेर की चौड़ाई और लंबाई के साथ मेल खाता है। यह देखते हुए कि शेर किसी दिए गए क्षेत्र में कड़ाई से नहीं हो सकता है, लेकिन साथ ही उनमें से दो पर, मछली पकड़ने के लिए पिंजरे को एक बढ़े हुए क्षेत्र से बनाया जाना चाहिए, अर्थात् 2L x 2W। इसके लिए धन्यवाद, हम गलतियों से बचेंगे जब शेर का आधा या इससे भी बदतर, केवल इसकी पूंछ पिंजरे में फंस जाती है।
महत्वपूर्ण लेख
गणना को सरल बनाने के लिए, माप त्रुटि के रूप में पूंछ को खारिज और अस्वीकृत किया जा सकता है।
इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 11.2।
चित्र: 11.2। आसन्न चयनकर्ताओं का उपयोग करके एक पैराग्राफ की उपस्थिति को बदलना
इस उदाहरण में, पैराग्राफ (टैग) का उपयोग करके पाठ को स्वरूपित किया गया है
), लेकिन H2.sic + P लिखना केवल टैग के बाद पहले पैराग्राफ के लिए शैली सेट करता है
जिसके पास sic गयी एक क्लास है।
आसन्न चयनकर्ता उन टैगों के लिए उपयोगी होते हैं जो स्वचालित रूप से इंडेंट करते हैं ताकि वे स्वतंत्र रूप से पैडिंग की मात्रा को समायोजित कर सकें। उदाहरण के लिए, यदि किसी पंक्ति में टैग हैं
तथा , तो उनके बीच की दूरी आसन्न चयनकर्ताओं की मदद से समायोजित करना आसान है। लगातार टैग के लिए स्थिति समान है। तथा
तथा
और इसी तरह के अन्य मामलों में भी। उदाहरण 11.3 इस तरह से निर्दिष्ट टैग के बीच इंडेंटेशन की मात्रा को बदलता है।
उदाहरण 11.3। शीर्षकों और पाठ के बीच संकेत
एचटीएमएल 5 सीएसएस 2.1 आईई सीआर ओप सा एफएक्स
शीर्षक 1
शीर्षक २
पैरा!
चूंकि आसन्न चयनकर्ताओं का उपयोग करते समय, स्टाइल को केवल दूसरे तत्व पर लागू किया जाता है, मार्जिन-टॉप प्रॉपर्टी के लिए नकारात्मक मूल्य को शामिल करके इंडेंट के आकार को कम किया जाता है। इस मामले में, पाठ ऊपर उठता है, पिछले तत्व के करीब।
जाँच करने के लिए प्रश्न
1. इस कोड में कौन से टैग आसन्न हैं?
सल्फ्यूरिक एसिड फॉर्मूला:एच 2इसलिए 4
तथा
- तथा
- तथा
- तथा
- तथा
2. निम्न HTML कोड है:
फ़र्मेट का अंतिम प्रमेय
एक्स n + य n
\u003d जेड n
जहाँ n एक पूर्णांक है\u003e 2
SUP + SUP (रंग: लाल?) शैली का उपयोग करके लाल रंग में कौन सा पाठ हाइलाइट किया जाएगा?
- दूसरा "एन"
- दूसरा और तीसरा "एन"।
शुभ संध्या, प्रिय सहयोगियों, आज हम आपके साथ दो अतिरिक्त अध्ययन करेंगे चयनकर्ताजिसे कहा जाता है बच्चे और भाई बहन चयनकर्ताओं... अधिक हद तक, आप उनके बिना कर सकते हैं, हालांकि, आपके विकास के लिए उन्हें सीखने की आवश्यकता है, और कभी-कभी लागू किया जाता है ताकि वे आपकी स्मृति में रहें। इसलिए, हम चर्चा करेंगे कि कौन सा है चयनकर्ताओं आसन्न हैं, और कौन से बच्चे हैं, और हम एक उदाहरण के साथ विश्लेषण करेंगे।
बाल सीएसएस चयनकर्ता - ऐसे तत्व जो मूल तत्व के अंदर स्थित हैं। इसका एक उदाहरण इस प्रकार हो सकता है। हमारे पास एक ब्लॉक है जिसमें एक पैरा, दूसरा ब्लॉक और एक चित्र है। ये तीन तत्व बच्चे हैं। यदि बाल ब्लॉक में अन्य तत्व भी हैं, तो वे अब पहले ब्लॉक के बच्चे नहीं हैं, लेकिन वे उस ब्लॉक के बच्चे हैं जिसमें वे सीधे स्थित हैं। मुझे उम्मीद है कि आपको बात मिल जाएगी।
आसन्न CSS चयनकर्ता - दस्तावेज़ कोड में एक के बाद एक स्थित तत्व। इसका एक उदाहरण यह है। हमारे पास एक पैराग्राफ है जिसके बाद एक टैग है अवधि... सब कुछ बहुत स्पष्ट है, लेकिन हमें सिर्फ वास्तविक उदाहरणों के साथ यह सब करना होगा।
एक पैराग्राफ में पाठ
अवधि में पाठ
अब एक पैराग्राफ में बाल पाठ नहीं है
टैग के लिए समान परिणाम जोड़ने के लिए शैलियों का उपयोग करना अवधि
डिव \u003e अवधि
फ़ॉन्ट-आकार: 200%;
}
पी + कुल (
लाल रंग;
}
दोनों मामलों में कोड निष्पादन का परिणाम टैग पर लागू होगा अवधिचूंकि यह टैग का एक बच्चा है div और टैग के बाद अगला पी... इसलिए, फ़ॉन्ट दो बार बड़ा और लाल हो गया। अब हम पूरी तरह से निपट चुके हैं सीएसएस में बच्चे और भाई-बहन चयनकर्ता, और आपको बस अभ्यास में अपने ज्ञान को मजबूत करना है, जल्द ही मिलते हैं!
पड़ोसी चयनकर्ता दस्तावेज़ कोड में किसी अन्य निर्दिष्ट तत्व के तुरंत बाद एक तत्व का चयन करता है। एक उदाहरण के रूप में HTML कोड का एक टुकड़ा लेते हैं।
पैराग्राफ और इसमें मोटे तत्व, और निहारना इच्छुक तत्व।
तीन टैग हैं:
, तथा ... टैग तथा एक कंटेनर में नेस्टेड
वे इसके बच्चे हैं। लेकिन एक दूसरे के संबंध में, वे आसन्न हैं।
आसन्न चयनकर्ता के लिए सिंटैक्स पिछले तत्व का चयनकर्ता है, उसके बाद चयनित तत्व का चयनकर्ता। चलो आसन्न चयनकर्ता काम करते हैं:
पैराग्राफ और इसमें मोटे तत्व, और निहारना इच्छुक तत्व।
यहाँ मोटे तथा रेखांकित तत्व, अधिक इच्छुक.
उदाहरण में, आप देख सकते हैं कि सिबलिंग चयनकर्ता को पहले पैराग्राफ में ट्रिगर किया गया था। यहाँ टैग तथा एक के बाद एक चलते हैं। और दूसरे पैराग्राफ में, उनके बीच टैग का उपयोग किया जाता है , अब दो अन्य आसन्न टैग जोड़े हैं: + तथा + .
इस मामले में एक त्रुटि टैग है टैग के निकट
यहाँ टैग टैग का एक बच्चा है
और वह, बदले में, माता-पिता है .
नीचे दिए गए उदाहरण से काम नहीं चलेगा:
पैराग्राफ और इसमें मोटे तत्व, और निहारना इच्छुक तत्व।
यहाँ मोटे तथा रेखांकित तत्व, अधिक इच्छुक.
एक अधिक वास्तविक दुनिया उदाहरण
आइए देखें कि आसन्न चयनकर्ता अधिक यथार्थवादी उदाहरण के साथ कैसे काम करता है। कई टैग वाले अनुभागों वाले बड़े लेखों में
, यह शीर्ष मार्जिन (संपत्ति मार्जिन-टॉप) को बढ़ाने के लिए वांछनीय है। 30px का एक इंडेंट पाठ को अधिक पठनीय बना देगा। लेकिन टैग के मामले में ठीक बाद आता है , और यह लेख की शुरुआत में टैग के ऊपर संकेत हो सकता है शानदार होगा। आप आसन्न तत्व चयनकर्ता का उपयोग करके इस समस्या को हल कर सकते हैं।
, और यह लेख की शुरुआत में टैग के ऊपर संकेत हो सकता है शानदार होगा। आप आसन्न तत्व चयनकर्ता का उपयोग करके इस समस्या को हल कर सकते हैं।
पड़ोसी चयनकर्ता कैसे काम करता है, इसके एक उदाहरण के लिए यहां html कोड है।
हैलो!
H2 शीर्षक
H2 शीर्षक
पैराग्राफ का पाठ अविश्वसनीय रोमांच के बारे में है।
H2 शीर्षक
पैराग्राफ का पाठ अविश्वसनीय रोमांच के बारे में है।
H2 शीर्षक
पैराग्राफ का पाठ अविश्वसनीय रोमांच के बारे में है।
इसके अलावा, आसन्न चयनकर्ता उपकरण का उपयोग करना, हेडिंग और अनुभाग के पहले पैराग्राफ के बीच इंडेंटेशन को समायोजित करना सुविधाजनक है, हमारे उदाहरण में ये टैग हैं