Html 在另一个 css 类中定位一个 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8965063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Target a css class inside another css class
提问by Iain Simpson
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 .
嗨，我在 joomla 中遇到了一些 css 类的问题。我在一个模块中有两个 div，一个是 wrapper class="wrapper" ，另一个是 content class="content" 。内容在包装器内。我想要做的是在内容类上定位一个 css 样式。通常我会把 .content {my style info} 放在样式表中，但问题是这个类在整个页面中被多次使用。所以在后端，你可以给一个模块分配一个类名，所以我把这个叫做 .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
但它不起作用，我知道你可以用 div 来做到这一点，所以
#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 ?.
由于某种原因，内容没有换行，只是在段落末尾从页面上消失了，所以我试图确保内容所在的第一级课程没有重叠任何东西，奇怪的是即使我修复了内容所在的 div 类为 50px 它仍然不会包装文本，所以我不确定我是否针对它？
edit >>>>>>>>>>..
编辑>>>>>>>>>>...
The html Joomla is creating basically looks like this >>
Joomla 正在创建的 html 基本上是这样的 >>
<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.
然后它被包裹在很好的旧 Joomla 风格的一百万个其他 div 中。
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
编辑 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>
EDIT 4 >>>>>>
编辑 4 >>>>>>
This is what it is doing
这就是它正在做的
回答by Scott
Not certain what the HTML looks like (that would help with answers). If it's
不确定 HTML 的样子（这将有助于回答）。如果它是
<div class="testimonials content">stuff</div>
<div class="testimonials content">stuff</div>
then simply remove the space in your css. A la...
然后只需删除 css 中的空格。一个...
.testimonials.content { css here }
.testimonials.content { css here }
UPDATE:
更新：
Okay, after seeing HTML see if this works...
好的，在看到 HTML 后，看看这是否有效...
.testimonials .wrapper .content { css here }
or just
要不就
.testimonials .wrapper { css here }
or
或者
.desc-container .wrapper { css here }
all 3 should work.
所有 3 应该工作。
回答by Jason Ebersey
I use div instead of tables and am able to target classes within the main class, as below:
我使用 div 而不是表，并且能够定位主类中的类，如下所示：
CSS
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
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>
If you want to style a particular "cell" exclusively you can use another sub-class or the id of the div e.g:
如果您想专门设置特定“单元格”的样式，您可以使用另一个子类或 div 的 id，例如：
.main #red { color: red; }
.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>
