第一個孩子更改多個嵌套的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

回答

相關問題