html - मैं कैसे नहीं कर सकता: पहला-बच्चा चयनकर्ता?





css css-selectors (5)


यह सीएसएस 2 समाधान ("किसी भी ul बाद कोई ul ") भी काम करता है, और अधिक ब्राउज़रों द्वारा समर्थित है।

div ul + ul {
  background-color: #900;
}

इसके विपरीत :not और :nth-sibling , आसन्न भाई चयनकर्ता IE7 + द्वारा समर्थित है।

यदि पेज लोड होने के बाद जावास्क्रिप्ट इन गुणों को बदलता है, तो आपको आईई 7 और आईई 8 कार्यान्वयन में कुछ ज्ञात बग देखना चाहिए। यह लिंक देखें

किसी भी स्थिर वेब पेज के लिए, यह पूरी तरह से काम करना चाहिए।

मेरे पास कई ul टैग वाले div टैग हैं।

अगर मैं केवल पहले ul टैग के लिए सेट सीएसएस गुणों का प्रयास कर रहा हूं, और यह कोड काम करता है:

div ul:first-child {
    background-color: #900;
}

जब मैं पहले को छोड़कर प्रत्येक ul टैग के लिए सीएसएस गुण सेट करना चाहता हूं, तो मैंने यह कोशिश की:

div ul:not:first-child {
    background-color: #900;
}

यह भी:

div ul:not(:first-child) {
    background-color: #900;
}

और इस:

div ul:first-child:after {
    background-color: #900;
}

लेकिन कोई प्रभाव नहीं। मुझे सीएसएस में कैसे लिखना चाहिए: "प्रत्येक तत्व, पहले को छोड़कर"?




div li~li {
    color: red;
}

आईई 7 का समर्थन करता है




आपके द्वारा पोस्ट किए गए संस्करणों में से एक वास्तव में सभी आधुनिक ब्राउज़रों के लिए काम करता है (जहां सीएसएस चयनकर्ता स्तर 3 supported ):

div ul:not(:first-child) {
    background-color: #900;
}

यदि आपको विरासत ब्राउज़र का समर्थन करने की आवश्यकता है, या यदि आप इसमें बाधा डाल रहे हैं :not चयनकर्ता की limitation (यह केवल एक साधारण चयनकर्ता को तर्क के रूप में स्वीकार करता है) तो आप एक और तकनीक का उपयोग कर सकते हैं:

एक नियम को परिभाषित करें जिसमें आपके इरादे से अधिक गुंजाइश है और उसके बाद इसे सशर्त रूप से "निरस्त करें", जो आप चाहते हैं उस पर अपना दायरा सीमित करें:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

स्कोप को सीमित करते समय आप जिस सीएसएस विशेषता को सेट कर रहे हैं उसके लिए डिफ़ॉल्ट मान का उपयोग करते हैं।




not(:first-child) अब और काम नहीं कर रहा है। कम से कम क्रोम और फ़ायरफ़ॉक्स के हाल के संस्करणों के साथ।

इसके बजाए, इसे आजमाएं:

ul:not(:first-of-type) {}







html css css-selectors