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

您好，我有一些在Joomla的CSS类的问题。 我有一个模块中的两个div，一个是wrapper class =“wrapper”，另一个是content class =“content”。 内容是内部包装。 我想要做的是在内容类上定位一个css风格。 通常我只是将.content {我的风格信息}放在样式表中，但问题是这个类在整个页面中被多次使用。 所以在后端，你可以指定一个模块的类名，所以我已经调用了这个.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创build基本看起来像这样>>

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

那么它被包装在一百万其他divs在老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> 

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

Answer 3

我在某个地方读到，我们可以在另一个class级内嵌套一个class级，但忘记了实际的方式。 这是这样的：

 <div class="parent"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> <style> .parent{ .child1, .child2, .child3{/*your css properties goes here*/} } </style> 

在这段代码中可能会丢失一些东西，但这也是一种方法。