दिलचस्प पोस्ट
एसक्यूएल सर्वर चयन करने के लिए JSON फ़ंक्शन बाश में मैन्युअल रूप से एक विशेष चर (ex: ~ tilde) का विस्तार कैसे करें SQL सर्वर डेटाबेस में सभी तालिकाओं के लिए पंक्ति गिनती कैसे प्राप्त करें जीआईटी ने एक लापता-एम विकल्प के बारे में शिकायत क्यों की है? रनटाइमः मुख्य थ्रेड मुख्य लूप में नहीं है .NET इकाई फ़्रेमवर्क और लेनदेन एक आईओएस डिवाइस पर राम की उपलब्ध राशि का निर्धारण करना LINQ के माध्यम से पेड़ को कैसे समतल करना है? jQuery.वही – जब सभी डिफरेड अब 'अनसुलझे' (या तो हल हो या अस्वीकार किए गए) के लिए कॉलबैक हैं? सर्वर ने मानक asp.net mvc के कारण ईवेंट्स (ईवेंट स्रोत) को त्रुटि के कारण भेजा बाइट सरणी पैटर्न खोज विंडोज 8 में आईआईएस में डब्लूसीएफ सेवाओं की सेवा नहीं दे सकती क्या मैं ICollectionView या ObservableCollection से बद्ध होना चाहिए पसंदीदा दृश्य स्टूडियो कीबोर्ड शॉर्टकट SQL सर्वर में निकटतम तारीख खोजें

क्या मैं गठबंधन कर सकता हूँ: nth-child () या: एक मनमानै चयनकर्ता के साथ nth-of-type ()?

क्या हर नऊ बच्चा का चयन करने का कोई तरीका है जो एक मनमानी चयनकर्ता से मेल खाता है (या मेल नहीं खाता) ? उदाहरण के लिए, मैं हर अजीब तालिका पंक्ति का चयन करना चाहता हूं, लेकिन पंक्तियों के सबसेट के भीतर:

table.myClass tr.row:nth-child(odd) { ... } 
 <table class="myClass"> <tr> <td>Row <tr class="row"> <!-- I want this --> <td>Row <tr class="row"> <td>Row <tr class="row"> <!-- And this --> <td>Row </table> 

लेकिन :nth-child() बस लगता है कि वे "पंक्ति" वर्ग के हैं या नहीं, सभी tr तत्वों की गिनती करते हैं, इसलिए मैं उन दोनों के बजाय एक "पंक्ति" तत्व के साथ समाप्त होता हूं जो मैं देख रहा हूं के लिये। वही चीज के साथ होता है :nth-of-type()

क्या कोई समझा सकता है?

Solutions Collecting From Web of "क्या मैं गठबंधन कर सकता हूँ: nth-child () या: एक मनमानै चयनकर्ता के साथ nth-of-type ()?"

यह एक बहुत ही सामान्य समस्या है जो कि कैसे गलत तरीके से उत्पन्न होती है :nth-child() और :nth-of-type() कार्य दुर्भाग्य से, वर्तमान में कोई चयनकर्ता-आधारित समाधान नहीं है, क्योंकि चयनकर्ता नथुने बच्चे से मेल खाने का कोई तरीका नहीं प्रदान करता है जो एक अजीब-गिने, यहां तक ​​कि गिने हुए या किसी भी an+b जैसे पैटर्न पर आधारित एक मनमानी चयनकर्ता से मेल खाता a != 1 और b != 0 यह चयनकर्ताओं, निषेधों और सरल चयनकर्ताओं के अधिक जटिल संयोजनों को दर्शाने के लिए, सिर्फ कक्षा चयनकर्ताओं से परे है।

:nth-child() स्यूडो-क्लास अपने सभी भाइयों के बीच एक ही माता-पिता के अंतर्गत गिनती करता है। यह केवल उन भाई-बहनों की गिनती नहीं करता है जो शेष चयनकर्ता से मेल खाते हैं। इसी प्रकार, :nth-of-type() छद्म-वर्ग की संख्या भाई – बहन एक ही तत्व प्रकार को बांटते हैं, जो एचटीएमएल में टैग नाम को संदर्भित करता है, और शेष चयनकर्ता नहीं।

इसका यह भी अर्थ है कि यदि एक ही माता-पिता के सभी बच्चे एक ही तत्व प्रकार के होते हैं, उदाहरण के लिए एक टेबल बॉडी के मामले में, जिनके बच्चे केवल tr तत्व या एक सूची तत्व हैं जिनके बच्चे केवल li तत्व हैं :nth-child() और :nth-of-type() समान रूप से व्यवहार करेंगे, अर्थात an+b प्रत्येक मान के लिए :nth-child(an+b) और :nth-of-type(an+b) समान सेट से मेल खाएंगे तत्वों का

वास्तव में, किसी दिए गए मिश्रित चयनकर्ता में छद्म-वर्गों सहित सभी सरल चयनकर्ताओं जैसे :nth-child() और :not() , एक दूसरे के स्वतंत्र रूप से काम करते हैं, बल्कि बाकी तत्वों से मेल खाने वाले तत्वों के सबसेट को देखते हुए चयनकर्ता का

इसका यह भी अर्थ है कि प्रत्येक यौगिक चयनकर्ता 1 में सरल चयनकर्ताओं के बीच क्रम का कोई धारणा नहीं है , जिसका अर्थ है कि निम्न दो चयनकर्ता समान हैं:

 table.myClass tr.row:nth-child(odd) table.myClass tr:nth-child(odd).row 

अंग्रेजी में अनुवादित, वे दोनों का अर्थ है:

किसी भी tr तत्व का चयन करें जो निम्नलिखित सभी स्वतंत्र स्थितियों से मेल खाता है:

  • यह उसके माता-पिता के अजीब-गिने हुए बच्चे हैं;
  • इसमें वर्ग "पंक्ति" है; तथा
  • यह एक table तत्व का वंशज है जिसमें वर्ग "मायक्लास" है

(आप एक अनोर्ड सूची के अपने उपयोग को यहां देखेंगे, बस बिंदु घर को चलाने के लिए)

क्योंकि वर्तमान में कोई शुद्ध सीएसएस समाधान नहीं है, आपको तत्वों को फ़िल्टर करने के लिए एक स्क्रिप्ट का उपयोग करना होगा और तदनुसार शैली या अतिरिक्त वर्ग के नाम पर लागू करना होगा। उदाहरण के लिए, निम्नलिखित एक सामान्य समाधान है जो jQuery का उपयोग कर रहा है (मानते हुए तालिका में केवल एक पंक्ति समूह मौजूद है):

 $('table.myClass').each(function() { // Note that, confusingly, jQuery's filter pseudos are 0-indexed // while CSS :nth-child() is 1-indexed $('tr.row:even').addClass('odd'); }); 

इसी सीएसएस के साथ:

 table.myClass tr.row.odd { ... } 

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

 //table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1] 

अन्य तकनीकों का उपयोग करने वाले अन्य समाधान पाठक को एक व्यायाम के रूप में छोड़ दिए जाते हैं; उदाहरण के लिए यह सिर्फ एक संक्षिप्त, उत्तरदायी उदाहरण है


यह क्या है, इसके लिए एक विस्तार के लिए एक प्रस्ताव है :nth-child() किसी भी चयनकर्ता से मेल खाते के हर nth बच्चे को चुनने के विशिष्ट उद्देश्य के लिए चयनकर्ता स्तर 4 में जोड़ा जाने वाला :nth-child() नोटेशन 2

चयनकर्ता जिसके द्वारा मिलान करने के लिए मिलान करने के लिए तर्क दिया जाता है :nth-child() , फिर से चयनकर्ताओं को एक दूसरे के स्वतंत्र रूप से संचालित करते हैं क्योंकि अनुक्रम में मौजूदा चयनकर्ता वाक्यविन्यास द्वारा निर्देशित होता है। तो आपके मामले में, यह ऐसा दिखेगा:

 table.myClass tr:nth-child(odd of .row) 

(एक चतुर पाठक तुरंत नोट करेगा कि ये होना चाहिए :nth-child(odd of tr.row) इसके बजाय, :nth-child(odd of tr.row) , क्योंकि साधारण चयनकर्ता tr और :nth-child() एक दूसरे से भी स्वतंत्र रूप से काम करते हैं। यह एक है कार्यात्मक छद्म-वर्गों के साथ समस्याएं जो चयनकर्ताओं को स्वीकार करती हैं, मैं कीड़ों की एक कण जो इस उत्तर के बीच में नहीं खुलती। इसके बजाय मैं इस धारणा के साथ जा रहा हूं कि अधिकांश साइटों में tr तत्वों की तुलना में कोई अन्य तत्व नहीं होगा एक दूसरे के भाई-बहनों के रूप में एक टेबल बॉडी में, जो कि विकल्प को समान रूप से समतुल्य कर देगी।)

बेशक, एक ब्रांड नए विनिर्देशन में एक नया प्रस्ताव होने के नाते, यह संभवतः सड़क के कुछ सालों तक कार्यान्वयन नहीं देखेंगे इस बीच, आपको ऊपर की तरह एक स्क्रिप्ट का उपयोग करने के साथ रहना होगा।


1 यदि आप एक प्रकार या सार्वभौमिक चयनकर्ता निर्दिष्ट करते हैं, तो उसे पहले आना चाहिए। यह चयनकर्ताओं को मौलिक रूप से काम करने का तरीका नहीं बदलता है, हालांकि; यह वाक्यात्मक बोली से ज्यादा कुछ नहीं है

2 यह मूल रूप से प्रस्तावित किया गया था :nth-match() , हालांकि, क्योंकि यह अभी भी केवल उसके भाई-बहनों के लिए एक तत्व को गिना जाता है, और किसी भी अन्य तत्व के लिए नहीं जो कि चयनकर्ता से मेल खाता है, इसके बाद से 2014 को एक एक्सटेंशन के रूप में पुनर्स्थापित किया गया मौजूदा :nth-child() बजाय

ज़रुरी नहीं..

डॉक्स से बोली

:nth-child छद्म श्रेणी एक तत्व से मेल खाता है जिसमें एक + बी -1 भाई बहन है, उसके पहले दस्तावेज़ पेड़ में , n के लिए किसी दिए गए सकारात्मक या शून्य मान के लिए, और एक मूल तत्व है।

यह अपनी खुद की एक चयनकर्ता है और कक्षाओं के साथ गठबंधन नहीं करता है। आपके नियम में यह एक ही समय में दोनों चयनकर्ताओं को संतुष्ट करना है, इसलिए यह दिखाएगा :nth-child(even) तालिका पंक्तियां यदि उनके पास भी हो तो।

nth-of-type तत्व के समान प्रकार के सूचक के अनुसार कार्य करता है लेकिन nth-child केवल इंडेक्स के अनुसार कार्य करता है चाहे कोई भी भाई-बहन तत्व किस प्रकार हो।

उदाहरण के लिए

 <div class="one">...</div> <div class="two">...</div> <div class="three">...</div> <div class="four">...</div> <div class="five">...</div> <div class="rest">...</div> <div class="rest">...</div> <div class="rest">...</div> <div class="rest">...</div> <div class="rest">...</div> 

मान लीजिए कि ऊपर एचटीएमएल में हम बाकी वर्ग वाले सभी तत्व छिपाना चाहते हैं।

इस मामले में nth-child और nth-of-type बिल्कुल समान होगा क्योंकि सभी तत्व एक ही प्रकार के होते हैं <div> ऐसा सीएसएस होना चाहिए

 .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){ display:none; } 

या

 .rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){ display:none; } 

अब आप सोच रहे होंगे कि nth-child और nth-of-type बीच अंतर क्या है, इसलिए यह अंतर है

मान लीजिए कि एचटीएमएल है

 <div class="one">...</div> <div class="two">...</div> <div class="three">...</div> <div class="four">...</div> <div class="five">...</div> <p class="rest">...</p> <p class="rest">...</p> <p class="rest">...</p> <p class="rest">...</p> <p class="rest">...</p> 

उपरोक्त HTML में .rest तत्व का प्रकार दूसरों से अलग है। यदि आप nth-child उपयोग करते हैं तो आप इस तरह से लिखना चाहते हैं

 .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){ display:none; } 

लेकिन यदि आप nth-of-type css का उपयोग करते हैं तो यह हो सकता है

 .rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){ display:none; } 

.rest तत्व के प्रकार के रूप में <p> इसलिए यहां nth-of-type के प्रकार .rest का nth-of-type का पता .rest और फिर वह <p> 1, 2, 3, 4, 5 वें तत्व के सीएसएस पर आवेदन कर रहा है।

आप एक्सपाथ के साथ ऐसा करने में सक्षम हो सकते हैं कुछ जैसे //tr[contains(@class, 'row') and position() mod 2 = 0] काम हो सकता है विवरणों पर विस्तार करने वाले अन्य ऐसे प्रश्न हैं कि कक्षाओं को और अधिक सटीक रूप से कैसे मिलान किया जाए।