如何在CSS中选择子元素？

Question

我有一些看起来像这样的HTML：

<h2>Heading</h2>
<div class='myClass'>
    <h2>Another Heading</h2>
</div>

假设我希望包含在类myClass的div中的所有h2元素都加下划线。

适合此的CSS选择器是什么？请注意，这是针对静态CSS文件，而不是jQuery。

我尝试了以下代码，但它不起作用。如果您可以告诉我这个错误的选择器选择了什么，那么奖励积分。

div.myClass > h2 { text-decoration: underline; }

Answer 1

如果我不得不猜测，我会说它看起来像CSS specificity problem。那个选择器是正确的。

使用Firebug之类的工具检查<h2>元素，并查看应用了哪些其他CSS规则。

Answer 2

这应该有效，除非你有特殊性问题（从代码中看起来不像），或者你使用的是非常旧的浏览器。

在你的情况下，这应该做同样的事情：

div.myClass h2 { text-decoration: underline; }

您可能想知道它是否有效。

此外，如果可能...分享http://jsfiddle.net或链接到您的代码。