为什么这个CSS：第一个孩子选择器不起作用？

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”。

这并不意味着“选择div”中的第一个fieldset。

在这种情况下，第一个孩子是<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">，这样就不是第一个孩子了。