First-child更改多个嵌套divs CSS

Question

我在CSS中的first-child和nth-child函数遇到了一些问题.我有一些像这样结构的div:

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

我想用class item更改第一个div的左边距.我用

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

这会改变div为id 456的边距,但也会改变所有text_container和header_span的边距.这不是我想要的; 我究竟做错了什么？

Answer 1

使用直接子选择器>:

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

注意:我可以看到你没有将你的属性包装在里面"而且也id不能以数字开头.

我想用class item更改第一个div的左边距.

如果是这种情况,您需要使用:

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

但这完全不同.