嗨我在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;}
由于某种原因,内容没有包装,只是在段落末尾的页面上消失了,所以我试图确保内容所处的第1级课程没有重叠,奇怪的是甚至是如果我修复div类的内容是50px,它仍然不会包装文本,所以我不确定我的目标是否正确?。
编辑>>>>>>>>>>> ..
html Joomla创建基本上看起来像这样>>
<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&gt;&gt;&gt;&gt;&gt;&gt;&gt; 好的,这就是吐出的东西
<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&gt;&gt;&gt;&gt;&gt;&gt;
这就是它正在做的事情
答案 0 :(得分:74)
不确定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都应该有用。
答案 1 :(得分:18)
我使用div而不是表格,并且能够在主类中定位类,如下所示:
.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;
}
<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>
如果你想设计一个特定的&#34;单元格&#34;你可以使用另一个子类或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>
答案 2 :(得分:-1)
我读到某个地方,我们可以在另一个类中嵌套一个类,但忘记了实际的方法。它是这样的:
<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>
此代码中可能缺少某些内容,但这也是一种方法。 注意:这是saas风格。