सीएसएस स्टाइल को बाल तत्वों पर लागू करें

232

मैं केवल एक विशेष वर्ग के साथ DIV के अंदर तालिका में शैलियों को लागू करना चाहता हूं:

नोट: मैं बच्चों के तत्वों के लिए सीएसएस-चयनकर्ता का उपयोग करूंगा।

# 1 कार्य और # 2 क्यों नहीं करता है?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

मैं क्या गलत कर रहा हूं?

css css-selectors

— रोमन एम
स्रोत

यह न भूलें कि>, + और [] चयनकर्ता IE6 और उससे कम के लिए अनुपलब्ध हैं।

— एरिक

309

यह कोड " div.test th, td, caption {padding:40px 100px 40px 50px;}" सभी thतत्वों के लिए एक नियम लागू करता है जो सभी तत्वों और सभी तत्वों के अतिरिक्त divएक वर्ग के नाम से एक तत्व से युक्त होता है ।test td caption

यह "सभी td, thऔर captionतत्व जो divएक वर्ग के साथ एक तत्व से निहित हैं " के समान नहीं है test। यह सुनिश्चित करने के लिए कि आपको अपने चयनकर्ताओं को बदलने की आवश्यकता है:

' >' कुछ पुराने ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं है (मैं आपको देख रहा हूं, इंटरनेट एक्सप्लोरर)।

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— केन ब्राउनिंग
स्रोत

वहाँ 3 बार div.test लिखने के आसपास कोई रास्ता नहीं है?

— रोमन एम

2

@rr Nope नियमों का कोई घोंसला बनाना या 'टाइप ग्रुपिंग' के साथ

— sblundy

2

@romanm 3 बार 'div.test' लिखने के आसपास है! सीएसएस फ़ाइलों को लिखने के लिए sass या कम चौखटे का उपयोग करने पर गौर करें! :)

— गिल्ब जूल

@romanm - सभी बच्चों के लिए दोहराए जाने, या .class> * का उपयोग करने से रोकने के लिए सभी बच्चों को लक्षित करने के लिए * का उपयोग करते हुए, मेरा उत्तर देखें। यह मुश्किल नहीं है।

— रिचर्ड एडवर्ड्स

IE में समर्थित नहीं होने के बारे में संकेत बहुत मददगार थे, मैं iOS पर DTCoreText के लिए कुछ CSS काम करने की कोशिश कर रहा था, लेकिन यह काम नहीं कर रहा था, उनका पार्सर IE से भी बदतर है।

— सायरन

123

.test * {padding: 40px 100px 40px 50px;}

— रिचर्ड एडवर्ड्स
स्रोत

11

ध्यान दें, * यहां इसका मतलब है कि आप इसे किसी भी अन्य विशिष्ट नियम के साथ ओवरराइड नहीं कर सकते क्योंकि .test *प्रत्येक बच्चे के तत्व के लिए यह सबसे विशिष्ट नियम होगा। दूसरे शब्दों में, ध्यान रखें कि जो कुछ भी आप अंदर रखते .test *हैं, उसे किसी भी अधिक विशिष्ट सीएसएस नियम द्वारा ओवरराइड नहीं किया जा सकता है क्योंकि test *यह सबसे विशिष्ट नियम है।

— वदसंबर

81

> चयनकर्ता वंश प्रत्यक्ष बच्चों को केवल, नहीं मेल खाता है।

तुम्हें चाहिए

div.test th, td, caption {}

या अधिक संभावना है

div.test th, div.test td, div.test caption {}

संपादित करें:

पहले वाला कहता है

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

जबकि दूसरा कहता है

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

आपके मूल में div.test > thकहा गया है any <th> which is a **direct** child of <div class="test">, जिसका अर्थ है कि यह मेल खाएगा <div class="test"><th>this</th></div>लेकिन मेल नहीं खाएगा<div class="test"><table><th>this</th></table></div>

— ग्रेग
स्रोत

fwiw, क्योंकि उस चयनकर्ता में td और कैप्शन "dumb" हैं - वे div.test की परवाह किए बिना किसी भी दिए गए वें / कैप्शन से मेल खाएंगे। इस तरह के ब्लाइंड टारगेटिंग शायद ही कभी सीएसएस में आप किसी भी चीज़ के लिए चाहते हैं, लेकिन सबसे सामान्य शैलियों।

— अन्नकूट

@annakata: यह सीएसएस फ्रेमवर्क का एक हिस्सा है, मैं इसे स्थानीय रूप से लागू करने की कोशिश कर रहा हूं

— रोमन एम

10

यदि आप सभी बच्चों में शैली जोड़ना चाहते हैं और html टैग के लिए कोई विनिर्देशन नहीं है तो इसका उपयोग करें।

माता-पिता का टैग div.parent

बच्चे टैग div.parent की तरह अंदर <a>, <input>, <label>आदि

कोड: div.parent * {color: #045123!important;}

आप महत्वपूर्ण को भी हटा सकते हैं, इसकी आवश्यकता नहीं है

— user1369111
स्रोत

7

यहाँ कुछ कोड है जो मैंने हाल ही में लिखा है। मुझे लगता है कि यह pseudoclasses के साथ वर्ग / आईडी नामों के संयोजन की एक बुनियादी व्याख्या प्रदान करता है।

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

स्निपेट का विस्तार करें

— निशान
स्रोत

CSS एकल लाइन टिप्पणियों जैसे कि की अनुमति नहीं देता है //। देखें stackoverflow.com/questions/4656546/...

— वोल्कर ई

4

div.test td, div.test caption, div.test th

मेरे लिये कार्य करता है।

IE6 में बच्चा चयनकर्ता> काम नहीं करता है।

— Traingamer
स्रोत

2

जहाँ तक मुझे यह पता है:

div[class=yourclass] table {  your style here; }

या आपके मामले में भी यह:

div.yourclass table { your style here; }

(लेकिन यह उन तत्वों के लिए काम करेगा yourclassजो शायद नहीं हो सकते हैं div) अंदर की तालिकाओं को प्रभावित करेंगे yourclass। और, जैसा कि केन कहते हैं,> हर जगह समर्थित नहीं है (और div[class=yourclass]भी, इसलिए कक्षाओं के लिए बिंदु संकेतन का उपयोग करें)।

— tunnuz
स्रोत

0

यह कोड SCSS सिंटैक्स का उपयोग करके ट्रिक को भी कर सकता है

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
स्रोत