4

<div>クラス「ユニット」を使用して、最初に下マージンを追加しようとしています。

<div id="wrapper-related-albums">
   <div class="header">...</div>
   <div class="unit">...</div> //add margin-bottom to this one!!!!
   <div class="header">...</div>
   <div class="unit">...</div>
</div>



#wrapper-related-albums .unit:first-child {margin-bottom:20px;} // doesn't work!!!
#wrapper-related-albums .unit:first-of-type {margin-bottom:20px;} // doesn't work!!!
4

2 に答える 2

4

より一般的/柔軟なソリューション

.unitWesley の回答は、リストの 2 番目の要素になると想定しているため、特定の html マークアップに適しています。したがって、あなたの場合、そうかもしれません。彼のソリューションはうまく機能します。ただし、誰かがより一般的な解決策を探している場合は、次のことを行う必要があります。

#wrapper-related-albums .unit { 
    /* code for the first one */ 
    margin-bottom: 20px;
}
#wrapper-related-albums .unit ~ .unit { 
    /* code for all the following ones */ 
    margin-bottom: 0px;
}

このように一般的な兄弟セレクター ( ~) を使用すると、最初の を除くすべてがオーバーライドされ.unit、最初.unitの はラッパーのどこにでも配置できます (位置 #2 だけでなく、位置を事前に知る必要はありません)。これは、変更を使用してそれを示すフィドルです。color

于 2013-06-04T20:22:28.443 に答える
2

マークアップに応じて、いくつかのオプションがあります。

クラス単位を持つ 2 番目の子:

#wrapper-related-albums .unit:nth-of-type(2) { }
#wrapper-related-albums .unit:nth-child(2) { }

最初の要素の隣接する兄弟 (クラス ユニットを使用):

#wrapper-related-albums :first-child + .unit {  }

「最初の」を単純に選択する方法はないと思いますが、常に最後になる場合は、最後のものを除く.unitすべてにマージンを追加できます。

#wrapper-related-albums .unit { margin-bottom: 20px; }

/* negate the above rule */
#wrapper-related-albums .unit:last-child { margin-bottom: 0px; }
于 2013-06-04T19:34:21.327 に答える