您好，我在 joomla 中遇到一些 CSS 类的问题。我在一个模块中有两个 div，一个是 wrapper class="wrapper"，另一个是 content class="content"。内容在包装内。我想要做的是针对内容类的 css 样式。通常我只是将 .content {my style info} 放在样式表中，但问题是这个类在整个页面中被多次使用。所以在后端，您可以为模块分配一个类名，所以我将其命名为 .testimonials。

为了不改变页面上的所有其他内容类，我试图通过放置以下内容来定位它:

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

由于某种原因，内容没有换行，只是在段落末尾从页面上消失了，所以我试图确保内容所在的第一级类(class)没有重叠任何东西，奇怪的是偶数如果我修复 div 类，内容位于 50px，它仍然不会换行文本，所以我不确定我的目标是否正确？

编辑>>>>>>>>..

Joomla 创建的 html 基本上是这样的 >>

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

然后它以良好的旧 Joomla 风格包裹在一百万个其他 div 中。

我已经为模块提供了推荐类，所以它最终看起来像这样:

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

编辑 3 >>>>>>>> OK，这就是它吐出来的内容

<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 个都应该工作。

关于html - 在另一个 css 类中定位一个 css 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8965063/