สวัสดีฉันมีปัญหากับคลาส css ใน joomla ฉันมีสอง div ในโมดูลหนึ่งคือ wrapper class = "wrapper" อีกอันคือ content class = "content" เนื้อหาอยู่ภายใน Wrapper สิ่งที่ฉันพยายามทำคือกำหนดเป้าหมายสไตล์ css ในคลาสเนื้อหา โดยปกติฉันจะใส่. content {my style info} ในสไตล์ชีต แต่ปัญหาคือคลาสนี้ถูกใช้หลายครั้งทั่วทั้งหน้า ดังนั้นในแบ็กเอนด์คุณสามารถกำหนดชื่อคลาสให้กับโมดูลได้ดังนั้นฉันจึงเรียกชื่อนี้ว่า. การรับรอง

เพื่อที่ฉันจะไม่เปลี่ยนคลาสเนื้อหาอื่น ๆ ทั้งหมดในเพจฉันพยายามกำหนดเป้าหมายโดยใส่สิ่งนี้:

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

แต่มันใช้งานไม่ได้ฉันรู้ว่าคุณทำได้ด้วย div ดังนั้น

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

แต่คำถามของฉันสามารถทำได้กับชั้นเรียนหรือไม่หากมีบางอย่างผิดพลาดขณะที่ฉันพยายามใช้สิ่งต่อไปนี้:

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

ด้วยเหตุผลบางประการเนื้อหาไม่ได้ถูกตัดและหายไปจากหน้าท้ายย่อหน้าดังนั้นฉันจึงพยายามตรวจสอบให้แน่ใจว่าชั้นเรียนระดับที่ 1 เนื้อหานั่งไม่ทับซ้อนกันสิ่งที่แปลกคือแม้ว่าฉันจะแก้ไข คลาส div ที่เนื้อหามีขนาดไม่เกิน 50px มันยังคงไม่ตัดข้อความดังนั้นฉันจึงไม่แน่ใจว่าฉันกำหนดเป้าหมายถูกหรือไม่

แก้ไข >>>>>>>>>> ..

html Joomla กำลังสร้างโดยทั่วไปมีลักษณะดังนี้ >>

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

จากนั้นมันจะถูกห่อหุ้มด้วย div อื่น ๆ อีกกว่าล้านรายการในสไตล์ Joomla แบบเก่าที่ดี

ฉันได้ให้คลาสของคำรับรองแก่โมดูลดังนั้นมันจึงมีลักษณะดังนี้:

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

นี่คือสิ่งที่ทำ

ไม่แน่ใจว่า HTML มีลักษณะอย่างไร (ซึ่งจะช่วยให้มีคำตอบ) ถ้ามัน

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

จากนั้นก็ลบช่องว่างใน css ของคุณ อะลา ...

.testimonials.content { css here }

อัพเดท:

เอาล่ะหลังจากดู HTML แล้วดูว่ามันใช้ได้ไหม ...

.testimonials .wrapper .content { css here }

หรือเพียงแค่

.testimonials .wrapper { css here }

หรือ

.desc-container .wrapper { css here }

ทั้ง 3 ควรใช้งานได้

ฉันใช้ div แทนตารางและสามารถกำหนดเป้าหมายชั้นเรียนภายในคลาสหลักดังต่อไปนี้:

CSS

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

HTML

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

หากคุณต้องการจัดรูปแบบ "เซลล์" เฉพาะคุณสามารถใช้คลาสย่อยอื่นหรือ id ของ div เช่น:

.main #red {color: 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>