：第一胎影响其他子元素

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它存在。