Xin chào, tôi đang gặp sự cố với một số lớp css trong joomla. Tôi có hai div trong một mô-đun, một là wrapper class = "wrapper", cái kia là content class = "content". Nội dung nằm trong trình bao bọc. Những gì tôi đang cố gắng làm là nhắm mục tiêu kiểu css trên lớp nội dung. Thông thường tôi sẽ chỉ đặt .content {my style info} trong bảng định kiểu, nhưng vấn đề là lớp này được sử dụng nhiều lần trong toàn bộ trang. Vì vậy, trong phần phụ trợ, bạn có thể gán tên lớp cho một mô-đun, vì vậy tôi đã gọi cái này là .testimonials.

Để tôi không thay đổi tất cả các lớp nội dung khác trên trang mà tôi đang cố gắng nhắm mục tiêu nó bằng cách đặt điều này:

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

nhưng nó không hoạt động, tôi biết bạn có thể làm điều này với div, vì vậy

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

nhưng câu hỏi của tôi là điều này có thể được thực hiện với các lớp không ?, nếu vậy có gì đó không ổn khi tôi đang cố gắng sử dụng như sau:

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

vì một lý do nào đó mà nội dung không được bao bọc và chỉ biến mất khỏi trang ở cuối đoạn văn, vì vậy tôi đang cố gắng đảm bảo rằng nội dung đang ngồi ở lớp cấp 1 không bị chồng chéo lên nhau, điều kỳ lạ là ngay cả khi tôi sửa. lớp div mà nội dung nằm trong 50px nó vẫn không bao bọc văn bản, vì vậy tôi không chắc liệu mình có đang nhắm mục tiêu nó đúng không ?.

chỉnh sửa >>>>>>>>>> ..

Html Joomla đang tạo về cơ bản trông như thế này >>

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

sau đó nó được bao bọc trong một triệu div khác theo phong cách Joomla cũ tốt.

Tôi đã cung cấp cho mô-đun lớp các lời chứng thực, vì vậy nó kết thúc giống như sau:

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

CHỈNH SỬA 3 >>>>>>> OK, đây là những gì nó đang phun ra

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

CHỈNH SỬA 4 >>>>>>

Đây là những gì nó đang làm

Không chắc chắn HTML trông như thế nào (điều đó sẽ giúp trả lời). Nếu nó

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

sau đó chỉ cần xóa không gian trong css của bạn. A la ...

.testimonials.content { css here }

CẬP NHẬT:

Được rồi, sau khi xem HTML, hãy xem điều này có hoạt động không ...

.testimonials .wrapper .content { css here }

hay chỉ

.testimonials .wrapper { css here }

hoặc là

.desc-container .wrapper { css here }

cả 3 sẽ hoạt động.

Tôi sử dụng div thay vì bảng và có thể nhắm mục tiêu các lớp trong lớp chính, như bên dưới:

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>

Nếu bạn muốn tạo kiểu riêng cho một "ô" cụ thể, bạn có thể sử dụng một lớp con khác hoặc id của div, ví dụ:

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