在另一个css类中定位一个css类

Question

嗨,我在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;}

由于某种原因,内容没有包装,只是在段落末尾的页面上消失了,所以我试图确保内容所在的第一级课程没有重叠,奇怪的是即使我修复了内容所在的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 >>>>>>

这就是它正在做的事情

Answer 1

不确定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应该工作.

Answer 2

我使用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>

如果你想专门设置一个特定的"单元格",你可以使用另一个子类或div的id,例如:

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