为什么这个 CSS :first-child 选择器不起作用？

Question

我正在从事一个 Asp.Net MVC 3 项目，但我遇到了难题，为什么这不能像我认为的那样工作。

我的标记是：

<fieldset>
    <input type="hidden" value="2">
    <div class="editor-label"> 
        <label for="Name"> Name</label>
    </div>
    ...
</fieldset>

我的 CSS 是：

.display-label, .editor-label
{
    margin: 0.8em 0 0 0;
    font-weight: bold;
    display: inline;
}

fieldset > div:first-child
{
    margin: 0;
}

我要做的就是让字段集中的第一个 div 的边距为 0。我认为选择器 fieldset > div:first-child 会将样式应用于“字段集的第一个子项，其类型为 div”，但显然有些事情正在躲避我。

我已经在 IE9/FF/Chrome 中尝试过这个，所以它不是一个旧的浏览器会弄乱我的选择器。

谢谢。

Answer 1

fieldset > div:first-child 表示“选择fieldset 的第一个子元素如果它是div”。

并不表示“选择fieldset中的第一个div”。

本例中的第一个孩子是<input type="hidden" value="2">。

要在不更改 HTML 的情况下选择 div，您需要使用 fieldset > div:first-of-type。

不幸的是，虽然:first-child 得到广泛支持，但:first-of-type 仅适用于 IE9+ 和其他现代浏览器。

因此，在这种情况下，最好的解决方法是继续使用fieldset > div:first-child，并简单地移动<input type="hidden" value="2">，这样它就不是第一个孩子了。