SASS/CSS：第一個孩子選擇器不工作

Question

我想用CSS/SASS在我的標記中設置某個<div>的樣式，我對爲什麼不應用這些規則一無所知。這是我的標記：

<div class="row addon-header"> 
    <div class="col-sm-3"> 
    // something here 
    </div> 
    <div class="col-sm-9"> 
     <h2>Title</h2> 
     <h6><em>Slogan</em></h6> 
     <div class="col-xs-1"> 
      // I want to access this 
     </div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
    </div> 
</div> 

這是我想使用它的SASS：

div.addon-header { 
    color: white; 
    > div.col-sm-9 > div.col-xs-1:first-child { 
     background-color: black; 
     padding-left: 0px !important; 
    } 
} 

如果我在SASS刪除:first-child選擇，它的工作，但很明顯，每不僅僅是第一個，這不是我想要的。

我也試過玩弄與做這樣的事情

div.addon-header { 
    color: white; 
    > div.col-sm-9 > div.col-xs-1 { 
     &:first-child { 
      background-color: black; 
      padding-left: 0px !important; 
     } 
    } 
} 

或

div.addon-header { 
    color: white; 
    > div.col-sm-9 { 
     > div.col-xs-1:first-child { 
      background-color: black; 
      padding-left: 0px !important; 
     } 
    } 
} 

或使用:nth-child(1)代替。什麼都沒有我無能爲力。在我的SASS的其他地方，我有以下幾點：

.tab-content { 
    >.tab-pane:first-child > form > div.row > div { 
     // rules here 
     > div.picture-container { 
      // rules here 
     } 
    } 
    >.tab-pane { 
     // rules here 
    } 
    >.tab-pane:nth-child(4) > form { 
     // rules here 
    } 
} 

哪個工作得很好。所以在第一個例子中，我真的不明白我做錯了什麼。任何人都可以幫忙？

Answer 1

col-xs-1需要包裝row，因爲這個塊不是第一個元素。第一個元素是h2

Answer 2

您需要:nth-of-type()（或者，在您的情況下爲:first-of-type選擇器）。

在示例中，您提供的:first-child的.col-sm-9元素是h2。

div.addon-header { 
    color: white; 
    > div.col-sm-9 > div.col-xs-1:first-of-type { 
     background-color: black; 
     padding-left: 0px !important; 
    } 
} 

注意，雖然，:nth-of-type()選擇，如:nth-child()選擇，適用於標籤而已，不是類名;如果您要在第一個.col-xs-1之前插入另一個div，那麼這將不再起作用。