एक और वर्ग कक्षा के अंदर एक सीएसएस वर्ग को लक्षित करें

Question

नमस्ते मुझे जूमला में कुछ सीएसएस वर्गों के साथ समस्या हो रही है। मेरे पास एक मॉड्यूल में दो divs हैं, एक आवरण वर्ग = "आवरण" है, दूसरा सामग्री वर्ग = "सामग्री" है। सामग्री आवरण के अंदर है। मैं जो करने की कोशिश कर रहा हूं वह सामग्री वर्ग पर एक सीएसएस शैली को लक्षित करता है। आमतौर पर मैं स्टाइल शीट में केवल .content {my style info} डाल सकता हूं, लेकिन समस्या यह है कि पूरे पृष्ठ में कई बार इस वर्ग का उपयोग किया जाता है। तो बैकएंड में, आप एक मॉड्यूल को एक क्लास नाम दे सकते हैं, इसलिए मैंने इसे एक .testimonials कहा है।

ताकि मैं पृष्ठ पर अन्य सभी सामग्री वर्गों को बदल न दूं जिन्हें मैं इसे डालकर लक्षित करने का प्रयास कर रहा हूं:

.testimonials .content {my style info I am trying to apply} 

लेकिन यह काम नहीं कर रहा है, मुझे पता है कि आप डिव के साथ ऐसा कर सकते हैं, इसलिए

#testimonials .content {my style info I am trying to apply} 

लेकिन मेरा सवाल यह है कि क्या यह कक्षाओं के साथ किया जा सकता है? यदि ऐसा कुछ गलत हो रहा है जैसा कि मैं निम्नलिखित का उपयोग करने की कोशिश कर रहा हूं:

.testimonials .content {font-size:12px; width:300px !important;}

जैसे कि किसी कारण से सामग्री लपेट नहीं रही है और बस अनुच्छेद के अंत में पृष्ठ से गायब हो गया है, इसलिए मैं यह सुनिश्चित करने की कोशिश कर रहा हूं कि सामग्री जिस स्तर पर बैठी है, वह कुछ भी ओवरलैप नहीं कर रहा है, अजीब बात यह है कि मैं ठीक कर रहा हूं div वर्ग सामग्री 50px में बैठता है यह अभी भी पाठ लपेट नहीं करेगा, इसलिए मुझे यकीन नहीं है कि क्या मैं इसे सही कर रहा हूं?

>>>>>>>>>>> संपादित करें ।।

Html जूमला मूल रूप से ऐसा बना रहा है >>

<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>

फिर इसे एक लाख अन्य डिवीजनों में अच्छी पुरानी जुमला शैली में लपेटा गया है।

मैंने मॉड्यूल को प्रशंसापत्र की श्रेणी दी है, इसलिए यह कुछ इस तरह दिखता है:

<div class="testimonials">
 <div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
</div>

EDIT 3 >>>>>>> ठीक है, यह वही है जो इसे बाहर थूक रहा है

<div class="testimonials">
   <div class="key4-block">
      <div class="module-title"><h2 class="title">Client Testimonials</h2></div>
         <div class="key4-module-inner">
            <div class="module-content">                                
               <script type="text/javascript">
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
            </script>
         <div id="rokstories-184" class="rokstories-layout6 content-left"  >
           <div class="feature-block">        
            <div class="feature-wrapper">
              <div class="feature-container">
                 <div class="feature-story">
                    <div class="image-full" style="float: right">
                        <img src="/sos/" alt="image" />                            
                    </div>
                    <div class="desc-container">
                        <div class="wrapper">                                                        
                           <span class="content"><p>Arrived in under 30 mins and got my pride and joy home in one piece, the day it conked out on me.</p>
                           <p>- Mr A Another</p></span>                                
                        </div>
                    </div>
                </div>
                <div class="feature-story">
                   <div class="image-full" style="float: right">
                      <img src="/sos/" alt="image" />                            
                   </div>
                   <div class="desc-container">        
                      <div class="description">                                                        
                         <span class="feature-desc">
                            <p>Great Service ! , SOS came to the rescue me in no time at all and made my day.</p>
    <p>- a customer</p>
                          </span>                                
                      </div>
                   </div>
                </div>
              </div>
           </div>
        </div>
      </div>

EDIT 4 >>>>>>

यह वही कर रहा है

Comments

खैर, जब तक आप प्रासंगिक HTML मार्क-अप नहीं दिखाते हैं, तब तक हम नहीं जानते कि आप क्या लक्ष्य बना रहे हैं ...

— डेविड कहते हैं कि मोनिका

हाय यह संभव नहीं है क्योंकि html स्वयं जूमला द्वारा बनाया गया है, न्यूज फीड मॉड्यूल में निर्माण का अपना हिस्सा बदलने की कोशिश कर रहा है

— इयान सिम्पसन

इसलिए? इसे एक पेज सौंपने दें, और फिर 'स्रोत देखें' और स्रोत से संबंधित अंश कॉपी / पेस्ट करें। बिना कुछ देखने के लिए हम सिर्फ अंधेरे में टटोल रहे हैं, और यह वास्तविक उत्तरों के लिए रचनात्मक नहीं है और मुझे 'वास्तविक प्रश्न नहीं' के रूप में बंद करना होगा। अगर मैं वास्तव में आपकी मदद करने का एक मौका है, जो मैं नहीं करना चाहिए।

— डेविड कहते हैं

ठीक है, किया, सामग्री वर्ग मूल रूप से लपेटने के बजाय आगे बढ़ रहा है, इसलिए स्क्रीन से गायब हो जाता है, भले ही मैं चौड़ाई को 300px तक ठीक कर दूं जो कि उसके माता-पिता से कितना बड़ा है

— इयान सिम्पसन

Answer 1

निश्चित नहीं है कि HTML कैसा दिखता है (जो उत्तर के साथ मदद करेगा)। अगर यह है

<div class="testimonials content">stuff</div>

तो बस अपने सीएसएस में जगह को हटा दें। एक ला ...

.testimonials.content { css here }

अपडेट करें:

ठीक है, HTML देखने के बाद देखें कि क्या यह काम करता है ...

.testimonials .wrapper .content { css here }

या केवल

.testimonials .wrapper { css here }

या

.desc-container .wrapper { css here }

सभी 3 को काम करना चाहिए।

Comments

धन्यवाद मैं दे दूंगा कि मुझे जाना है, मैंने कुछ html पोस्ट किए होंगे, लेकिन इसका निर्माण जूमला द्वारा किया गया है, इसलिए केवल एक लाख php फाइलें हैं

— Iain Simpson

हम्म यह वास्तव में अजीब है, अगर मैं सिर्फ इटसेल्फ द्वारा .content लगाता हूं, और फिर पृष्ठ पर 300px सब कुछ डाल देता हूं, तो कक्षा सामग्री में 300 गुना तक बदलाव होता है, इसके अलावा जिस चीज को मैं बदलना चाहता हूं, वह फायरबग के साथ आगे के निरीक्षण पर भी अपनी कक्षा में सामग्री है। , इसलिए मेरे पास अब कोई सुराग नहीं है कि यह क्या कारण है, मुझे लगता है कि मुझे साइट को पैक करना और अपलोड करना पड़ सकता है, इसलिए सभी को इसके स्थानीय मो पर इंस्टॉल करें।

— इयान सिम्पसन

खैर बहुत कम से कम हम वास्तव में HTML का एक सा देखने की जरूरत है। शायद पूरे पृष्ठ नहीं, लेकिन कम से कम प्रासंगिक अनुभाग।

— स्कॉट

मैं ऊपर की कोशिश की, लेकिन अभी भी नहीं जाना, आवरण एक वर्ग है, हालांकि, यह नहीं होना चाहिए।

— सिम्पसन

मैंने गलत किया है और संपादित किया है, कृपया फिर से देखें। एहसास है कि contentएक अवधि एक ब्लॉक तत्व नहीं है, इसलिए चौड़ाई गुणों की कोई भी मात्रा में परिवर्तन नहीं होगा। आप की चौड़ाई को बदलने की जरूरत.wrapper

— स्कॉट

Answer 2

मैं तालिकाओं के बजाय div का उपयोग करता हूं और मुख्य वर्ग के भीतर कक्षाओं को लक्षित करने में सक्षम हूं, नीचे:

सीएसएस

.main {
    .width: 800px;
    .margin: 0 auto;
    .text-align: center;
}
.main .table {
    width: 80%;
}
.main .row {
   / ***something ***/
}
.main .column {
    font-size: 14px;
    display: inline-block;
}
.main .left {
    width: 140px;
    margin-right: 5px;
    font-size: 12px;
}
.main .right {
    width: auto;
    margin-right: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
}

एचटीएमएल

<div class="main">
    <div class="table">
        <div class="row">
            <div class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>

यदि आप किसी विशेष "सेल" को विशेष रूप से स्टाइल करना चाहते हैं, तो आप किसी अन्य उप-वर्ग या आईडी की आईडी का उपयोग कर सकते हैं जैसे:

.main #red {रंग: लाल; }

<div class="main">
    <div class="table">
        <div class="row">
            <div id="red" class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>