涵蓋每一個CSS樣式排列和組合

Question

我正在建立一個網站主題的分佈，我只是上傳單元測試，看看事情的樣子。其中一件事是嵌套塊引用，這在我的情況下給了我一個非常大的底部邊緣。我能夠通過造型

blockquote blockquote { 
margin-bottom:0; 
} 

來解決這個問題，所以，我解決了這個問題，但它帶出了另一個......我意識到，如果有人是第二塊引用，則利潤後添加一些內容會在外面。我確信我可以設計這個風格，但是如果有人把標題，前綴，代碼等放在同一個位置怎麼辦？ ...而這種情況不僅僅是在blockquote中表現出來......或者只是在評論中表現出來。

我的問題是這樣的：當構建發佈主題時，爲每個單一排列和組合創建主題開發人員風格，或者甚至可以這樣做？

Answer 1

在這個特殊的例子中，聽起來好像你在blockquote中添加了一個填充（如果你還有背景顏色或邊框，它看起來會更好），並且由於默認情況下blockquote有一個margin-bottom，底部和底部邊距加在一起。處理這個問題

我目前最喜歡的方式是像這樣：

使用薩斯：

p, blockquote, .other-margined-elements { 
    margin: 1rem 0; 

    &:first-child { 
     margin-top: 0; 
    } 

    &:last-child { 
     margin-bottom: 0; 
    } 
} 

生成CSS：

p, blockquote, .other-margined-elements { 
    margin: 1em 0; 
} 

p:first-child, blockquote:first-child, .other-margined-elements:first-child { 
    margin-top: 0; 
} 

p:last-child, blockquote:last-child, .other-margined-elements:last-child { 
    margin-bottom: 0; 
} 

使用這種方法，它只是一個事確定要添加到列表中的元素。我當前的列表是這樣的：h1，h2，h3，h4，h5，h6，p，ul，ol，dl，table，blockquote，div，section，article，aside，fieldset

還有其他方法可以做到這一點如果你覺得上面的代碼是一個有點過分：

blockquote > :first-child { 
    margin-top: 0; 
} 

blockquote > :last-child { 
    margin-bottom: 0; 
} 

得益於:first-child和:last-child僞類，沒有必要寫出來的每一個組合。