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

Question

我正在使用wordpress，并且我有一个元素想要样式化。。。它被称为。。。

<h2 class="widgettitle">

现在，我知道我可以了，

h2.wigettitle {
whatever:css;
}

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

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

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

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

那么，有没有可能让这个特定的元素在我的元素中做一些类似#headereraa.h2.widgetitle之类的事情？

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

希望这有意义。。。谢谢你们的帮助。

Answer 1

使用#headerarea h2.widgettitle。包括一个空间意味着看孩子们。如果包含>，这意味着只查找直接子项。请注意，如果替代不起作用，请在末尾添加!important，以确保它们将替代应用的任何其他样式。

Answer 2

您可以使用子选择器或子代选择器来实现这一点。子选择器> #headerarea > h2.widgettitle选择具有类widgettitle的h2元素，该类是id为headerearea的元素的子级。子类选择器a空间#headerarea h2.widgettitle选择具有类widgettitle的h2元素，该类是id为headerearea的元素的子类。

另请参阅http://www.w3.org/TR/css3-selectors/#selectors

Answer 3

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