मैं एक तत्व के सभी बच्चों के लिए एक शैली कैसे लागू करूं

Question

मेरे पास एक तत्व है class='myTestClass'। मैं इस तत्वों के सभी बच्चों के लिए एक सीएसएस शैली कैसे लागू करूं? मैं केवल तत्व बच्चों को शैली लागू करना चाहता हूं। इसके भव्य बच्चे नहीं।

मैं प्रयोग कर सकता हूँ

.myTestClass > div {
  margin: 0 20px;
}

जो सभी divबच्चों के लिए काम करता है , लेकिन मैं एक समाधान चाहूंगा जो सभी बच्चों के लिए काम करे। मैंने सोचा कि मैं उपयोग कर सकता हूं *, लेकिन

.myTestClass > * {
  margin: 0 20px;
} 

काम नहीं करता।

संपादित करें

.myTestClass > *चयनकर्ता फ़ायरफ़ॉक्स 26 में नियम लागू नहीं होता है, और वहाँ फ़ायरबग के अनुसार मार्जिन के लिए कोई अन्य नियम है। और यह काम करता है अगर मैं के *साथ बदलें div।

Comments

यह 'काम नहीं ’कैसे करता है? ध्यान रखें कि उन बाल तत्वों के वंशज (संभावना) उन बाल तत्वों को सौंपी गई अधिकांश शैलियों को विरासत में प्राप्त करेंगे।

— डेविड का कहना है कि

इसे इंस्पेक्टर के साथ डिबग करें और देखें कि क्या कोई नियम इस पर चल रहा है

— Brewal

Answer 1

डेविड थॉमस द्वारा टिप्पणी के अनुसार , उन बाल तत्वों के वंशज (संभावना) उन बाल तत्वों को सौंपी गई अधिकांश शैलियों को प्राप्त करेंगे।

आपको अपने .myTestClassतत्व के अंदर लपेटने और .wrapper * वंशज चयनकर्ता को जोड़कर शैलियों को लागू करने की आवश्यकता है । फिर, तत्व बच्चों को शैली लागू करने के लिए .myTestClass > * बाल चयनकर्ता को जोड़ें , न कि उसके भव्य बच्चों को। इस तरह के उदाहरण के लिए:

JSFiddle - डेमो

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}

<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>

Comments

एक सार्वभौमिक चयनकर्ता का उपयोग कभी न करें। यह प्रतिपादन पर एक बड़ा प्रदर्शन प्रभाव पड़ता है।

— यसइकॉन

@yescan: ठीक है कि यह जानना अच्छा है .... क्या आपके पास एक वैकल्पिक समाधान है जो सार्वभौमिक चयनकर्ता का उपयोग नहीं करता है?

— मैथ्यू निकोल्स

सार्वभौमिक चयनकर्ता का प्रदर्शन आधुनिक ब्राउज़रों पर उतना बुरा नहीं है। यहाँ एक संदर्भ है । काम पर मेरा अपना अनुभव इस लेखक के निष्कर्ष को पुष्टि करता है।

— नाथन

Answer 2

*चयनकर्ता के बजाय आप चयनकर्ता के :not(selector)साथ उपयोग कर सकते हैं >और कुछ सेट कर सकते हैं जो निश्चित रूप से एक बच्चा नहीं होगा।

संपादित करें: मैंने सोचा था कि यह तेज़ होगा लेकिन यह पता चलता है कि मैं गलत था। उपेक्षा।

उदाहरण:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>

Comments

ऐसा करने से क्या फायदा?

— विल्सन बिग्स

@WilsonBiggs - यह "एक सार्वभौमिक चयनकर्ता का उपयोग नहीं करने" के लिए एक भ्रामक प्रयास प्रतीत होता है। लेकिन इसका स्पष्ट रूप से एक बुरा विचार है, क्योंकि यह "निकट-सार्वभौमिक" है, फिर भी एक अतिरिक्त परीक्षण की आवश्यकता है - इसलिए इसे सभी काम करना होगा जो एक सार्वभौमिक चयनकर्ता करेगा और फिर अतिरिक्त काम करेगा।

— टूलमेकरसेव

: नहीं (चयनकर्ता) केवल सफारी पर काम करता है और ऐसा नहीं लगता कि यह क्रोम / फायरफॉक्स पर काम करेगा

— gtamborero