【问题标题】：Target a css class inside another css class在另一个 css 类中定位一个 css 类
【发布时间】：2012-02-16 09:57:09
【问题描述】：

您好，我在 joomla 中遇到了一些 css 类的问题。我在一个模块中有两个 div，一个是包装器 class="wrapper"，另一个是内容 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 它仍然不会换行文本，所以我不确定我的目标是否正确？。

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

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 标记之前，我们根本不知道您的目标是什么...
您好，这是不可能的，因为 html 是由 joomla 自己创建的，它是我试图更改的新闻提要模块中构建的一部分
所以？让它呈现一个页面，然后“查看源代码”并从源代码中复制/粘贴相关摘录。没有 something 可以看到，我们只是在黑暗中摸索，这对实际答案没有建设性，我将不得不投票结束，因为“不是一个真正的问题”。如果有机会真正帮助您，我宁愿不这样做。
好的，完成，内容类基本上是在进行，而不是换行，所以会从屏幕上消失，即使我将宽度固定为 300px，即它的父级有多大

标签： html css joomla module

【解决方案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 个都应该工作。

【讨论】：

谢谢，我会试一试，我会发布一些 html，但它是由 Joomla 生成的，所以只有一百万个 php 文件
hmm 这真的很奇怪，如果我自己放置 .content，然后将页面上的所有内容都放置 300px，类内容更改为 300px，除了我想要更改的内容之外，进一步用 firebug 检查它的类也是内容，所以我现在不知道是什么原因造成的，我想我可能必须打包网站并上传它，以便在 mo 的本地安装中向所有人展示它。
至少我们需要实际看到一点 HTML。也许不是整个页面，但至少是相关部分。
我尝试了上面的方法，但仍然不行，包装器虽然是一个类，所以它不应该是 .wrapper 吗？
我看错了，已经编辑了，请再看一遍。意识到content 作为一个跨度不是一个块元素，所以没有多少宽度属性会改变它。你需要改变.wrapper的宽度

【解决方案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 { 颜色：红色； }

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

【讨论】：

【解决方案3】：

.parentClass {
      background:green;
      padding:20px:
}
.parentClass>.childClass {
      background:pink;
      padding:10px;
      margin:10px;
}

<div class="parentClass">
   Donec a sem pharetra, ultricies ipsum id
   <div class="childClass">
     Lorem ipsum dolor sit amet consectetur
   </div>
   Donec a sem pharetra, ultricies ipsum id
</div>

【讨论】：