是否可以在一行中的样式表上调用外部div中的内部div？

Question

我正在使用wordpress，我有一个我想要设计的元素...它被称为......

<h2 class="widgettitle">

现在，我知道我能做到，

h2.wigettitle {
whatever:css;
}

然而，我遇到的问题是我有多个具有相同标题的小部件，它会影响所有这些小部件。

但是，这个h2.widget标题位于另一个名为“headerarea”的div中。

所以，在我的文件中它就像......

<div id=headerarea">
    <h2 class="widgettitle">
               whatever title
    </h2>
</div>

那么可以让这个特定的元素做一些像＃headerarea.h2.widgettitle或者我的元素中的东西吗？

我尝试独立设计外部div，但内部div仍然从其他地方抓取样式，所以我需要覆盖所有这些。

希望这是有道理的...感谢任何帮助人员。

Answer 1

使用#headerarea h2.widgettitle。包括一个空间意味着看着孩子们。如果您包含>，则表示仅查看直接子项。请注意，如果您的替换不起作用，请在末尾添加!important，以确保它们会覆盖所应用的任何其他样式。

Answer 2

您可以使用子选择器或后代选择器来完成此操作。子选择器> #headerarea > h2.widgettitle选择具有类widgettitle的h2元素，该元素是具有id headerarea的元素的子元素。后代选择器空格#headerarea h2.widgettitle选择具有类widgettitle的h2元素，它是具有id headerarea的元素的后代。

另见http://www.w3.org/TR/css3-selectors/#selectors

Answer 3

#headerarea .widgettitle {
    /* Put your styles here */
}