sibling選取器實現vertical margins的執行個體代碼

sibling選取器如何在完成複雜設計要求的同時，保持CSS可讀

這是web前端開發過程中開始簡單逐步變的複雜的例子之一：將一篇文章中的所有元素應用垂直邊距（vertical margins），例如由複雜markdown編譯來的部落格文章。

　大多數情況下，你必須要處理很多例外和相關，比如：標題和圖片上下通常需要更多空白，但是如果兩個圖片上下挨著，那兩圖間空白就改變少。h2標籤和h3標籤直接的距離要比兩個h2之間要小。

　　當原作者幾年前剛開始做前端的時候，所有這些異常和依賴關係總是導致複雜的代碼，視覺不一致和意想不到的行為。google了好多回為啥margin-top不起作用。

第一步

　　簡單的html如下：

<article class="article">  <h1>Hello World</h1>  <p>Lorem ipsum dolor sit amet</p>  <p>Lorem ipsum dolor sit amet</p>  <img src="…" alt="…">  <p>Lorem ipsum dolor sit amet</p>  <ul>    <li>Lorem</li>    <li>Ipsum</li>    <li>Dolor</li>  </ul>

　　通常先拿出兩段來調整它們之間的垂直邊距，達到預期效果後，使用該值作為所有元素的基礎邊距。

.article > * + * {     margin-top: 1.5rem;}

　　上述css代碼給.article中全部有相鄰兄弟元素的子項目添加margin-top。只給直系元素添加margin-top屬性避免了不想要的效果，比如上述html中ul將被添加margin-top，而不是li。

第二步

　　在這一步中會添加更具體的css規則，如：

.article > img + * {     margin-top: 3rem;}

　　img之後的任何元素都會接收到特定的margin-top，效果類似於直接向img應用margin-bottom。 但是使用相鄰的兄弟選取器和邊緣頂部有兩個優點：

　　1.不必從最後一個子進程中刪除margin-bottom

　　2.並避免摺疊邊距（ collapsing margins.）

第三步

　　在此步驟中，將規則添加到特定元素，例如：

.article > * + h2 {     margin-top: 4rem;}.article > * + img {     margin-top: 3rem;}

　　有相鄰兄弟的h2和img，會收到一個特定的margin-top。

第四步

　　在這最後一步中處理有特殊相關性的樣式

.article > img + img {     margin-top: 1rem; }

　　改變相鄰圖片間的距離

　　如果需要還可以添加精確的css選取器，如：

.article > img + img + img + h2 {     margin-top: 5rem;}

　　如果一個h2排列在在連續三個映像，它會收到一個特定的margin-top。 幸運的是，這這隻是一個特殊案例， 但是很高興知道相鄰的兄弟選取器可以解決這種複雜的依賴問題。

進階使用

　　為了提高可讀性，使用（SCSS）嵌套並將每條規則寫入一行。 不用對具有相同值的選取器進行分組，因為CSSO會在之後構建任務中處理它。

.article {    > * + * { margin-top: 1.5rem }    > h2 + * { margin-top: 1rem }    > img + * { margin-top: 3rem }    > * + h2 { margin-top: 4rem }    > * + h3 { margin-top: 3.5rem }    > * + img { margin-top: 3rem }    > img + img { margin-top: 1rem }    > h2 + h3 { margin-top: 4.5rem }}

這種技術也適用於SASS或CSS，例如基準網格。 如果所有margin都是是一個指定margin變數計算的，只需要更改該變數來增加或減少整體空白。

結論　　

　　一般開發的網站時會遇到非常複雜的文章，通常包括類別標題，簡介文本或嵌套布局等元素。使用相鄰的兄弟選取器和唯一的margin-top可以在解決複雜的設計要求的同時保持CSS可理解， 方便之後再添加或調整規則。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程