：第一胎影響其他子元素

Question

我有這個在我的SASS文件：

.buttons { 
    :first-child { 
     padding-top:7px; 
    } 
} 

HTML：

<div class="buttons"> 
    <div> 
    <label> 
     <input type="checkbox"> 
     bla blaa 
    </label> 
    </div> 
    <div> 
    <a class="advance">Step2</a> 
    <button class="btn">help <i class="arrow"></i></button> 
    </div> 
</div> 

箭頭孩子受着padding，雖然。我只想要父母.button內的第一個孩子。

我也試過這樣：

.buttons { 
    &:first-child { 
     padding-top:5px; 
    } 
} 

Answer 1

你的第一個解決方案：

.buttons { 
    :first-child { 
     padding-top: 7px; 
    } 
} 

本質上變成這條規則：

.buttons *:first-child { padding-top: 7px; } 

這將具有完全相同的效果，你'描述 - 每:first-child在.buttons將會受到影響。

你的第二個解決方案：

.buttons { 
    &:first-child { 
     padding-top: 5px; 
    } 
} 

打開這個規則：

.buttons:first-child { padding-top: 5px; } 

這將隻影響.buttons本身，只有當它是:first-child內它的父。

我認爲你要找的是：

.buttons > *:first-child { padding-top: 5px; } 

這將影響第一要素，無論哪種類型，內.buttons它存在。