html - 样式第一个孩子（如果它是第一个元素）

Question

我想为第一个 h2 子级添加填充，前提是它是父级中的“第一个元素”。

<div id="test">
    <h2>Try 1</h2>
    Test Test Test
    <h2>Try 2</h2>
</div>  

这里只有带有文本“Try 1”的 h2 必须得到我的自定义填充。

<div id="test">
    Test Test Test
    <h2>Try 1</h2>
    <h2>Try 2</h2>
</div>  

这里没有（之前有文字）。

试过这个：

h2
{
    padding-top:0;
}

#test h2:first-child
{
    padding-top:40px;
}​

但这还不够！我可以用 CSS2 做到这一点吗？

Answer 1

只有当它是第一个子节点时？不，不幸的是，不是 CSS 选择器，因为非元素节点对 CSS 选择器是不可见的（属性选择器和:empty除外）。

Answer 2

http://jsfiddle.net/CUwRc/查看示例

示例CSS：

 div h2:nth-of-type(1) {
   background:red;
  }​

恐怕只有 IE9+ 支持，其他浏览器都可以！