在另一个css类中定位一个css类 [英] Target a css class inside another css class
问题描述
您好，我在joomla的一些css类有问题。我在模块中有两个div，一个是wrapper class =wrapper，另一个是content class =content。内容是内部包装。我想要做的是在内容类上定位一个css风格。通常我会在样式表中放置.content {my style info}，但问题是这个类在整个页面中多次使用。所以在后端，你可以为模块分配一个类名，所以我已经调用了这个.testimonials。
这样我就不会改变所有其他内容类页面我试图通过把它作为目标：
.testimonials .content {我想要应用的样式信息}
但它不起作用，我知道你可以用div来做这件事，所以
#testimonials .content {my style info我想申请}
但是我的问题是可以用类来完成吗？如果是这样的话，我尝试使用下面的代码会出错：
.testimonials .content {font-size：12px; width：300px！important;}
由于某些原因，内容没有包装，只是消失页的末尾，所以我试图确保内容所在的一级课程不会重叠任何东西，奇怪的是即使我修复了div课程，内容仍位于50px内，但它仍然不会包装文本，所以我不确定我的目标是否正确？
编辑>>>>>>>>>> ..
html Joomla创建的基本看起来像这样>>
< div class =wrapper >
< div class =content> SOME CONTENT< / div
< / div>
然后它被包装在一百万个其他div中，以旧的Joomla风格。
我给了这个模块一个推荐类，所以它看起来像这样：
< div class =testimonials>
< div class =wrapper>
< div class =content> SOME CONTENT< / div
< / div>
< / div>
编辑3 >>>>>>>
好的，这就是随地吐痰out
< div class =testimonials>
< div class =key4-block>
< div class =module-title>< h2 class =title>客户评价< / 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-184class =rokstories-layout6 content-left>
< div class =feature-block>
< div class =feature-wrapper>
< div class =feature-container>
< div class =feature-story>
< div class =image-fullstyle =float：right>
< img src =/ sos /alt =image/>
< / div>
< div class =desc-container>
< div class =wrapper>
< span class =content>< p>在30分钟内到达，并在一件作品中获得了我的骄傲和快乐，这一天它对我产生了影响。< / p>
< p> - Mr A Another< / p>< / span>
< / div>
< / div>
< / div>
< div class =feature-story>
< div class =image-fullstyle =float：right>
< img src =/ sos /alt =image/>
< / div>
< div class =desc-container>
< div class =description>
< span class =feature-desc>
< p>卓越的服务！ ，SOS立即来拯救我，并让我度过了一天。< / p>
< p> - 客户< / p>
< / span>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
编辑4 >>>>>>
这是它正在做的事情
不确定HTML的外观（这有助于解答）。如果是
< div class =testimonials content> stuff< / div>
然后只需删除您的CSS中的空间。 A la ...
.testimonials.content {css here}
UPDATE：
好的，看到HTML后， / p>
.testimonials .wrapper .content {css here}
或者只是
.testimonials .wrapper {css here}
或
.desc-container .wrapper {css here}
全部3个都可以工作。
Hi I am having problems with some css classes in joomla. I have two divs in a module, one is the wrapper class="wrapper", the other is the content class="content" . Content is inside wrapper. What I am trying to do is target a css style on the content class. Usually I would just put .content {my style info} in the style sheet, but the problem is that this class is used several times throughout the page. So in the backend, you can assign a module a class name, so I have called this one .testimonials .
So that I dont alter all the other content classes on the page I am trying to target it by putting this :
.testimonials .content {my style info I am trying to apply}
but it is not working, I know you can do this with divs, so
#testimonials .content {my style info I am trying to apply}
but my question is can this be done with classes ?, if so something is going wrong as I am trying to use the following :
.testimonials .content {font-size:12px; width:300px !important;}
as for some reason the content is not wrapping and just vanishes off the page at the end of the paragraph, so I am trying to make sure the 1st level class the content is sitting is not overlapping anything, the odd thing is even if I fix the div class the content sits in to 50px it still wont wrap the text, so I am not sure if I am targeting it right ?.
edit >>>>>>>>>>..
The html Joomla is creating basically looks like this >>
<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
then it is wrapped in a million other divs in the good old Joomla style.
I have given the module the class of testimonials, so it ends up looking something like :
<div class="testimonials">
<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
</div>
EDIT 3 >>>>>>> OK, this is what it is spitting out
<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>
EDIT 4 >>>>>>
This is what it is doing
Not certain what the HTML looks like (that would help with answers). If it's
<div class="testimonials content">stuff</div>
then simply remove the space in your css. A la...
.testimonials.content { css here }
UPDATE:
Okay, after seeing HTML see if this works...
.testimonials .wrapper .content { css here }
or just
.testimonials .wrapper { css here }
or
.desc-container .wrapper { css here }
all 3 should work.
这篇关于在另一个css类中定位一个css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
