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

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

Answer 1

使用直接子选择器>：

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

注意：我可以看到您没有将您的属性包含在"中，而且id也无法以数字开头。

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

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

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

但这完全不同。

Answer 2

试试这个

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

Answer 3

你的html几乎没有错误，请尝试解决这个问题： Demo

用class

id

" "

移除div's和,

id

HTML：

class

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

正如Sanjay和Praveen所说，你需要使用.item:first-child { margin-left: 30px; }伪类

First-child更改多个嵌套divs CSS

3 个答案: