在另一个 css 类中定位一个 css 类
[英] Target a css class inside another css class
本文介绍了在另一个 css 类中定位一个 css 类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 joomla 中遇到了一些 css 类的问题.我在一个模块中有两个 div，一个是 wrapper class="wrapper"，另一个是 content class="content".内容在包装器内.我想要做的是针对内容类的 css 样式.通常我会把 .content {my style info} 放在样式表中，但问题是这个类在整个页面中被多次使用.所以在后端，你可以给一个模块分配一个类名，所以我把这个叫做 .testimonials .
这样我就不会改变页面上的所有其他内容类，我试图通过放置它来定位它:
.testimonials .content {我正在尝试应用的风格信息}
但它不起作用，我知道你可以用 div 来做到这一点，所以
#testimonials .content {我正在尝试应用的风格信息}
但我的问题是这可以用类来完成吗?，如果是这样的话，当我尝试使用以下内容时会出现问题:
.testimonials .content {font-size:12px;宽度:300像素！重要；}
由于某种原因，内容没有换行，只是在段落末尾从页面上消失了，所以我试图确保内容所在的第一级课程没有重叠任何东西，奇怪的是偶数如果我将 div 类修复为 50px 的内容，它仍然不会包装文本，所以我不确定我的目标是否正确?.
编辑 >>>>>>>>>>..
Joomla 创建的 html 基本上看起来像这样 >>
<div class="content">一些内容</div>
然后它被包裹在一个很好的旧 Joomla 风格的其他一百万个 div 中.
我给模块提供了推荐类，所以它最终看起来像:
<div class="wrapper"><div class="content">一些内容</div>
编辑 3 >>>>>>OK，这就是吐出来的
<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('');<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";样式=浮动:右"><img src="/sos/";alt=图像"/>
<div class="desc-container"><div class="wrapper"><span class="content"><p>不到 30 分钟就到了，我的骄傲和喜悦一气呵成，这一天就在我身上消失了.</p><p>-A先生另一个</p></span>
<div class="feature-story"><div class="image-full";样式=浮动:右"><img src="/sos/";alt=图像"/>
<div class="desc-container"><div class="description"><span class="feature-desc"><p>很棒的服务！, SOS 很快就来救我，让我开心起来.</p><p>-客户</p></span>
编辑 4 >>>>>>
这是它在做什么
解决方案
不确定 HTML 是什么样的(这有助于回答).如果是
<div class="testimonials content">stuff</div>
然后只需删除 css 中的空格.啦啦...
.testimonials.content { css 这里}
更新:
好的，在看到 HTML 后看看这是否有效...
.testimonials .wrapper .content { css 这里}
或者只是
.testimonials .wrapper { css 这里}
或
.desc-container .wrapper { css 这里}
所有 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屋！
查看全文
