为什么这个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;
}

我想要做的就是让fieldset中的第一个div的边距为0.我认为选择器fieldset > div:first-child会将样式应用于"fieldset的第一个子节点,其类型为div",但显然有些东西在逃避我.

我在IE9/FF/Chrome中试过这个,所以它不是一个老浏览器弄乱了我的选择器.

谢谢.

Answer 1

fieldset > div:first-child意思是"选择的第一个子元素fieldset ,如果它是一个div".

这并不意味着"选择第一个div在fieldset".

在这种情况下,第一个孩子是<input type="hidden" value="2">.

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

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

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