为什么这个CSS：第一个子选择器工作？ [英] Why doesn't this CSS :first-child selector work?

问题描述

我正在开发一个Asp.Net MVC 3项目，并遇到了一个砖墙，为什么这不工作，我认为应该这样。

我的标记是：

 < fieldset> 
< input type =hiddenvalue =2> 
< div class =editor-label> 
< label for =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有一个margin我认为选择器 fieldset> div：first-child 会将样式应用到字段集的第一个孩子，其类型是div，但显然有些东西正在躲避我。

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

谢谢。

解决方案

fieldset> div：first-child 表示选择字段集的第一个子元素 如果是 div 。

这并不意味着选择第一个 div fieldset 。

这种情况下的第一个孩子是< input type = hiddenvalue =2> 。

要选择 div 改变HTML，你需要使用 fieldset>不幸的是， pseudoclass-firstchildrel =noreferrer> ：first-child 得到广泛支持， ：first-of-type 仅适用于IE9及其他新型浏览器。

因此，在这种情况下，最好的解决方法是继续使用 fieldset> div：first-child ，只需移动< input type =hiddenvalue =2>

I'm working on an Asp.Net MVC 3 project and have run into a brick wall on why this doesn't work like I think it should.

My markup is:

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

My css is:

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

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

All I want to do is make the first div in the fieldset have a margin of 0. I thought that the selector fieldset > div:first-child would apply the style to "the first child of a fieldset, whose type is a div", but apparently something is eluding me.

I've tried this in IE9/FF/Chrome so it's not an old browser messing with my selectors.

Thanks.

解决方案

fieldset > div:first-child means "select the first child element of a fieldset if it's a div".

It does not mean "select the first div in the fieldset".

The first child in this case is <input type="hidden" value="2">.

To select that div without changing the HTML, you need to use fieldset > div:first-of-type.

Unfortunately, while :first-child is widely supported, :first-of-type only works in IE9+ and other modern browsers.

So, in this case, the best fix is to continue using fieldset > div:first-child, and simply move <input type="hidden" value="2"> so that's it's not the first child.

这篇关于为什么这个CSS：第一个子选择器工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！