html - First-child 更改多个嵌套 div 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>

我想更改带有类项的第一个 div 的左边距。我用

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

这会更改 ID 为 456 的 div 的边距，还会更改所有 text_container 和 header_span 的边距。这不是我想要的；我做错了什么？

Answer 1

使用直接子选择器 >:

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

注意:我可以看到您没有将属性包装在 " 中，而且 id 不能以数字开头。

I want to change the left-margin of the first div with class item.

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

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

但这给出了完全不同的结果。