0

最初の子の疑似クラスセレクターは効果がないようです。これが CSS で、その後に HTML が続きます。

.social-block a:first-child {
     margin-bottom: 20px;
 }

 <div class="social-block">
      <a href="#" target="_blank"><img src="stylesheets/img/socialblock-facebook.png" alt="socialblock-facebook" width="300" height="125"></a>
      <a href="#" target="_blank"><img src="stylesheets/img/socialblock-twitter.png" alt="socialblock-twitter" width="300" height="125"></a>
 </div>

どこが間違っているのかわかりません！

4

2 に答える 2

2

まず、古いバージョンのブラウザは疑似セレクタをサポートしていません。次に、インライン要素でmargin-bottomを使用しています。マージンボトムはブロック要素のプロパティです。

a:first-child{display:block;margin-bottom:12px;}

動作します。

于 2012-09-26T18:31:08.567 に答える
2

インライン要素には、上下の余白は適用されません。同様の質問を参照してください:インライン要素のマージントップ。

下マージンを与える<a>には、 を使用してブロック レベルの要素にすることができますdisplay: block。ただし、これでは 2 番目のリンクが次の行に押し出されるため、2 つのリンクを並べて表示するには、追加の手法 (フロートなど) を組み込む必要がある場合があります。

インライン要素の詳細: http://www.maxdesign.com.au/articles/inline/

ちなみに、:first-child疑似クラスは IE 8.0 以前では完全にはサポートされていません。CSS コンテンツとブラウザの互換性を参照してください。

于 2012-09-26T18:27:39.193 に答える