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


90

嗨,我在joomla中的某些CSS类遇到问题。我在模块中有两个div,一个是包装类class =“ wrapper”,另一个是内容类class =“ content”。内容在包装器内。我想做的是针对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;}

由于某种原因,内容没有包装并且仅在本段末尾消失了,所以我试图确保内容所在的1级课程没有任何重叠,奇怪的是即使我修复了内容位于50px的div类,它仍然不会包装文本,因此我不确定是否将其定位为对吗?

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

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 >>>>>>>确定,这就是吐出来的内容

<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标记,我们才完全不知道您的目标是什么……
大卫说,恢复莫妮卡(Monica)

嗨,这不可能,因为html是由joomla本身创建的,它是新闻Feed模块中要更改的部分
Iain Simpson

所以?让它呈现一个页面,然后“查看源代码”并从源代码中复制/粘贴相关摘录。没有东西可以看到,我们只是在黑暗中摸索,这对于实际的答案并没有建设性,我将不得不投票赞成“不是一个真正的问题”。如果有机会真正帮助您,我宁愿不这样做。
大卫说恢复莫妮卡(Monica)

好的,完成了,内容类基本上是在进行而不是包装,所以消失了,即使我将宽度固定为300px也是如此,这是它的父级的大小
Iain Simpson 2012年

Answers:


114

不确定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 }

这三个都应该工作。


谢谢,我会去的,我会张贴一些html,但是它是由Joomla生成的,所以只有一百万个php文件
Iain Simpson

嗯,这真的很奇怪,如果我只是自己放.content,然后将300px的所有内容都放在该类上,除了我要更改的内容,将类内容更改为300px,再用firebug进一步检查,它的类也很满意,所以我现在不知道是什么原因了,以为我可能必须打包网站并上载它,以便在移动本地安装时向所有人显示。
伊恩·辛普森

好吧,至少我们需要实际看到一些HTML。也许不是整个页面,但至少是相关部分。
Scott

我尝试了上面的方法,但是仍然不能走,尽管包装器是一个类,所以它不是.wrapper吗?
伊恩·辛普森

1
我看不清楚并已编辑,请再见。意识到content跨度不是块元素,因此没有任何宽度属性会改变它。您需要更改.wrapper
Scott

22

我使用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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.