第一个孩子更改多个嵌套的div CSS

我在CSS中的第一个孩子和第n个孩子功能有问题。我有一些像这样的结构：第一个孩子更改多个嵌套的div CSS

<div class = container> 
    <div id = 456, class = item> 
    <div id = header_123, class = item_header> 
     <div class = text_container> 
      <div class="header_span">This is Item 456</div> 
     </div> 
    </div> 
    </div> 
    <div id = 789, class = item> 
    <div id = header_124, class = item_header> 
     <div class = text_container> 
      <div class="header_span">This is Item 789</div> 
     </div> 
    </div> 
    </div> 
    <div id = 123, class = item> 
    <div id = header_125, class = item_header> 
     <div class = text_container> 
      <div class="header_span">This is Item 123</div> 
     </div> 
    </div> 
    </div> 
</div>

我想改变第一个div与类项目的左边距。我使用

.item div:first-child{ 
    margin-left: 30px; 
}

这改变了ID为456的边距的div，也是所有text_container和header_span的边距。这不是我想要的;我究竟做错了什么？

来源

2015-10-12 e.klara.k

没有这是你看起来要求的一流的选择器。 –

你可以试试它： - http://jsfiddle.net/Khumesh/4w8q752e/ –

使用直接子选择器>：

.item > div:first-child { 
    margin-left: 30px; 
}

注：我看得出，你是不是里面包裹的"属性和也是一个id不能以数字开头。

我想用class item改变第一个div的左边距。

如果是这样的话，你需要使用：

div.item:first-child { 
    margin-left: 30px; 
}

但是，这完全给出了不同的一个。

来源

2015-10-12 10:13:05

@Paulie_D刚更新它。 –

Grr ...你为什么这么快在评论！ '：P' –

谢谢你，这个伎俩！我在这里写的div只是个例子，所以我没有把它们想得太多，但是当然你是对的。 –

尝试这个

.item:first-child{ 
    margin-left: 30px; 
    }

来源

2015-10-12 10:15:06

你的HTML有一些错误，尝试修复它是这样的：Demo

裹class和id与" "
删除div's那有,在id和class之间

HTML：

<div class="container"> 
    <div id="456" class="item"> 
     <div id="header_123" class="item_header"> 
      <div class="text_container"> 
       <div class="header_span">This is Item 456</div> 
      </div> 
     </div> 
    </div> 
    ...

CSS：

.item:first-child { 
    margin-left: 30px; 
}

随着桑杰和普利文提到的，你需要使用:first-child伪类

来源

2015-10-12 10:24:19

第一个孩子更改多个嵌套的div CSS

回答

相关问题