অন্য সিএসএস ক্লাসের ভিতরে একটি সিএসএস শ্রেণিকে লক্ষ্য করুন get

Question

হাই আমার জুমলার কিছু CSS ক্লাস নিয়ে সমস্যা হচ্ছে। আমার একটি মডিউলে দুটি ডিভ রয়েছে, একটি হ'ল র‍্যাপার ক্লাস = "র‌্যাপার", অন্যটি বিষয়বস্তু শ্রেণি = "সামগ্রী"। সামগ্রীটি মোড়কের ভিতরে রয়েছে is আমি যা করার চেষ্টা করছি তা বিষয়বস্তু শ্রেণিতে একটি সিএসএস শৈলীর লক্ষ্য। সাধারণত আমি কেবল স্টাইল শীটটিতে আমার ধারণা {আমার স্টাইলের তথ্য put রেখে দিতাম, তবে সমস্যাটি হ'ল এই শ্রেণিটি পুরো পৃষ্ঠা জুড়ে বেশ কয়েকবার ব্যবহৃত হয়। সুতরাং ব্যাকএন্ডে, আপনি একটি মডিউলকে একটি শ্রেণীর নাম নির্ধারণ করতে পারেন, তাই আমি এটিকে।

যাতে আমি এই পৃষ্ঠায় রেখে অন্য লক্ষ্যবস্তু শ্রেণীর পরিবর্তন করতে চাই না:

.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;}

যে কারণে কোনও কারণে সামগ্রীটি মোড়ানো হচ্ছে না এবং অনুচ্ছেদটির শেষে পৃষ্ঠাটি কেবল অদৃশ্য হয়ে যায়, তাই আমি চেষ্টা করার চেষ্টা করছি যে 1 ম স্তরের শ্রেণীর বিষয়বস্তুটি বসে আছে কোনও কিছুকে ওভারল্যাপ করছে না, আমি ঠিক করার পরেও বিজোড় জিনিসটি রয়েছে ডিভিটি ক্লাসে বিষয়বস্তুটি 50px এ বসে এটি এখনও পাঠ্যটি আবৃত করবে না, তাই আমি নিশ্চিত না যে আমি এটি সঠিকভাবে লক্ষ্য করছি কিনা?

সম্পাদনা করুন >>>>>>>>>>

এইচটিএমএল জুমলা মূলত এটি >> এর মতো দেখায়

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

তারপরে এটি ভাল পুরাতন জুমলা স্টাইলে মিলিয়ন অন্যান্য ডিভগুলিতে আবৃত।

আমি মডিউলটিকে প্রশংসাপত্রের শ্রেণি দিয়েছি, সুতরাং এটির মতো কিছু দেখার শেষ হয়:

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

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>

সম্পাদনা 4 >>>>>>

এটি এই কি করছে

Comments

ঠিক আছে, যতক্ষণ না আপনি প্রাসঙ্গিক এইচটিএমএল মার্ক আপ না দেখান আমরা ততক্ষণে কী লক্ষ্যবস্তু করছি তা আমরা জানি না ...

— ডেভিড মনিকা

হাই এটি সম্ভব নয় যেহেতু এইচটিএমএল জুমলা নিজেই তৈরি করেছে, নিউজ ফিডের মডিউলটিতে তার অংশের অংশটি পরিবর্তনের চেষ্টা করছে

— আইয়েন সিম্পসন

তাহলে? এটি একটি পৃষ্ঠা রেন্ডার করুন এবং তারপরে 'উত্স দেখুন' এবং উত্স থেকে প্রাসঙ্গিক অংশটি অনুলিপি / কপি করুন। ছাড়া কিছু আমরা শুধু অন্ধকারে groping করছেন তা দেখতে চাই এবং এটা প্রকৃত উত্তরের জন্য গঠনমূলক না এবং আমি যেমন ঘনিষ্ঠ ভোট করতে হবে 'কোনও আসল প্রশ্নটি।' আসলে আমি আপনাকে সাহায্য করার কোনও সুযোগ থাকলে আমি যা করব না।

— ডেভিড মনিকা

ঠিক আছে, সম্পন্ন হয়েছে, বিষয়বস্তু শ্রেণিটি মোড়কের পরিবর্তে মূলত চালিয়ে যাচ্ছে, তাই আমি পর্দাটি অদৃশ্য করে দিয়েছি, এমনকি যদি আমি প্রস্থটি 300px স্থির করি তবে এর পিতা-মাতার কত বড়

— আইয়েন সিম্পসন

Answer 1

এইচটিএমএল দেখতে কেমন তা নিশ্চিত নয় (এটি উত্তরগুলির সাথে সহায়তা করবে)। যদি এটি

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

তারপরে আপনার সিএসএসের স্থানটি সরিয়ে ফেলুন। একটি লা ...

.testimonials.content { css here }

হালনাগাদ:

ঠিক আছে, এইচটিএমএল দেখার পরে দেখুন যে এটি কাজ করে ...

.testimonials .wrapper .content { css here }

অথবা শুধুই

.testimonials .wrapper { css here }

বা

.desc-container .wrapper { css here }

সমস্ত 3 কাজ করা উচিত।

Comments

ধন্যবাদ আমি যাব, আমি কিছু এইচটিএমএল পোস্ট করতাম, তবে এটি জুমলা দ্বারা উত্পাদিত হয়েছিল, সুতরাং কেবলমাত্র এক মিলিয়ন পিএইচপি ফাইল রয়েছে

— আইয়ন সিম্পসন

এইচএমএম এটি সত্যই অদ্ভুত, যদি আমি নিজেই নিজের অনুসারে বিষয়বস্তু রাখি এবং তারপরে পৃষ্ঠাতে ক্লাসের বিষয়বস্তু পরিবর্তন করে 300px সব কিছু রেখেছি তবে আমি যে জিনিসটি পরিবর্তন করতে চাই তা বাদ দিয়ে ফায়ারবগের সাথে আরও পরিদর্শন করার সাথে এর শ্রেণিটিও বিষয়বস্তুতে রয়েছে , সুতরাং এটির কারণ কী তা এখন আমার কোনও ধারণা নেই, ভাবেন যে আমার কাছে সাইটটি প্যাক করতে এবং এটি আপলোড করতে হতে পারে তাই মোয়ে লোকাল ইনস্টলটিতে প্রত্যেককে এটির মতো দেখান।

— আয়ান সিম্পসন

খুব খুব কম সময়ে আমাদের আসলে কিছুটা এইচটিএমএল দেখতে হবে। সম্ভবত পুরো পৃষ্ঠাটি নয়, তবে অন্তত প্রাসঙ্গিক বিভাগ।

— স্কট

আমি উপরেরটি চেষ্টা করেছিলাম, কিন্তু এখনও যাই না, মোড়কটি যদিও একটি শ্রেণি, তাই এটি হওয়া উচিত নয়?

— আইয়েন সিম্পসন

আমি ভুল লিখেছি এবং সম্পাদনা করেছি, দয়া করে আবার দেখুন। অনুধাবন করুন যে contentএকটি স্প্যান হওয়া কোনও ব্লক উপাদান নয় তাই প্রস্থের পরিমাণের কোনও পরিমাণই এটি পরিবর্তন করতে চলেছে। আপনি প্রস্থ পরিবর্তন প্রয়োজন.wrapper

— স্কট

Answer 2

আমি টেবিলের পরিবর্তে ডিভ ব্যবহার করি এবং নীচের মত, প্রধান শ্রেণীর মধ্যে ক্লাস লক্ষ্য করতে সক্ষম হয়েছি:

সিএসএস

.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>

আপনি যদি কোনও নির্দিষ্ট "সেল" একচেটিয়াভাবে স্টাইল করতে চান তবে আপনি অন্য একটি উপ-শ্রেণি বা ডিআইডি আইডি ব্যবহার করতে পারেন যেমন:

.মেন # রেড {রঙ: লাল; }

<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>