logo标签列表

定位CSS类内部的另一个CSS类

htmlcssjoomlamodule
119

嗨，我在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 中。

我给模块添加了 testimonials 类，所以最终看起来像是这样的：

<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标记*，否则我们根本不知道您的目标是什么... - David Thomas
抱歉，这是不可能的，因为HTML是由Joomla自己创建的，它是内置新闻源模块的一部分，我正在尝试更改它。 - Iain Simpson
那么，让它渲染一个页面，然后查看源代码并从源代码中复制/粘贴相关的摘录。如果没有*可见的东西，我们就像在黑暗中摸索一样，这对于实际答案来说是没有建设性的，我不得不投票关闭为“不是一个真正的问题”。如果有帮助您的机会，我宁愿不这样做。 - David Thomas
好的，完成了。内容类基本上是继承而不是包装，因此即使我将宽度固定为其父级大小的300px，它也会消失在屏幕上。 - Iain Simpson
3个回答
152

不确定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，页面上所有带有类别content的东西都会变成300px，除了我想要更改的那个东西。在使用Firebug进一步检查时发现它的类别也是content，所以我现在不知道原因是什么，我想我可能必须打包网站并上传它以向每个人展示，因为它目前是本地安装。 - Iain Simpson
我尝试了上面的方法，但仍然不行。不过，这个包装器是一个类，所以应该是 .wrapper 吧？ - Iain Simpson
1
我误读了并进行了编辑，请再次查看。请注意，content 是一个 span 元素，因此无论设置多少宽度属性都不会改变它的块级元素属性。您需要更改 .wrapper 的宽度。 - Scott
.desc-container .wrapper 似乎影响了页面上除了我想要的那个模块之外的所有其他模块，尽管它与其余部分具有完全相同的类 :-S - Iain Simpson
显示剩余3条评论
33
我使用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>
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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接