html - 是否可以在一行中调用样式表的外部 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. 包括一个空间意味着看孩子们。如果包含 a>这意味着只查看直接子级。请注意，如果您的覆盖不起作用，请!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 */
}