CSS：類中的鄰接兄弟

Question

嘗試向鄰接的兄弟添加頂部邊距。

<div class="container"> 
    <h2>Header 1</h2> 
    <p>Some text and sentences...</p> 
    <h2>Header 2</h2> 
    <p>Some more text and sentences..</p> 
</div> 

通常，我將完成的「標題2」自頂緣通過使用在相鄰的兄弟姐妹的CSS。

p + h2{ 
    margin-top: 12px; 
} 

然而，H2已經通過

.container h2{ 
    margin: 24px 0px; 
} 

爲邊界如何使相鄰的兄弟姐妹CSS的工作，而重寫.container H2 CSS？

Answer 1

.container h2比p + h2更具體，因此被考慮在內。您需要更具體的選擇器來覆蓋邊距。

這應該是 「更具體」，並覆蓋：

.container p + h2 { 
    margin-top: 12px; 
} 

Answer 2

嘗試以下操作：

.container > p + h2{ 
    margin: 12px; 
} 

即：

• 選擇h2元素...
• ...它緊跟在p元素...
• .. 。這是一個container類的元素的孩子。

由於.container > p + h2包含1類和2層的元件，它將覆蓋.container h2，其中只有1類和1個元素。

Answer 3

這應該工作

.container p + h2 { 
margin-top: 12px; 
}