CSS選擇下一場比賽

Question

有一個佈局像這樣：

<div class="a"> 
    <div> 
     <div class="b"> 
      <div class="b">...</div> 
     </div> 
    </div> 
</div> 

是它在所有可能的樣式僅第一個div B類，而不必定義到B的整個路徑？

.a .b { 
    border: 1px solid green; 
} // Will style also the second b 
.a > div > .b { 
    border: 1px solid red; 
} // Path too strictly defined 

關當然，我的結構可沒這麼簡單，並在div b類裏面的內容可以是任何東西，所以我不希望嚴格界定從下到B的風格和所有其他元素。

應該有一個css選擇器，它說「第一次下一場比賽」。

Answer 1

這個什麼：使用:first-child將樣式每月的第一個孩子是有階級

您例如

.a .b:first-child { 
    border:1px solid red; 
} 

Answer 2

.b:first-child 

要限制它的第一個孩子應該用你將不得不添加其他選擇器。

Answer 3

應該有一個css選擇器，它說「第一次下一場比賽」。

那麼，沒有。您將不得不指定與您的元素匹配的確切結構，您已使用.a > div > .b完成該結構。如果有任何需要重寫樣式的內部元素，則需要爲這些元素添加單獨的規則。

Answer 4

，以保持與更復雜的結構你的代碼是添加另一個類的最佳方式：

HTML

<div class="a"> 
    <div> 
     <div class="b parent"> 
      <div class="b">...</div> 
     </div> 
    </div> 
</div> 

CSS

.a .b { 
    border: 1px solid green; 
} 
.a .b.parent { 
    border: 1px solid red; 
} 

SCSS

.a { 
    .b { 
     border: 1px solid green; 

     &.parent { 
      border: 1px solid red; 
     } 
    } 
} 

Answer 5

最簡單的CSS：

.a > div > div { 
    border: 1px solid red 
}