SiuMan C

有時在 html 即使用了 css+div , 有時都會好多好多語法( code ), 就好似你用div 裝置了3張圖片, 其中間各有距離( margin )而左右要貼著邊界, 但如果 div 中的 img 標籤都設定為 margin-left:10px; 的話,最左面(第一張)圖就會多出了 10px 的 margin 了… …

那麼豈不是要在第一張圖中加 style / class, 這就是最常見面又好難避免的多 code 問題了, 當然都不是做多什麼久的時候, 但總人有想更方便 code 排得更靚更易看的, 希望可以在 css 中就把這一切都完成, 這時候你就可以用到 :first-child , 用法也很簡單, 就只是在div 後加 > img:first-child{ xxx:xxx; } , 就可以自由地控制第一張的設定。

例:
in HTML
<div>
<img src=”??.jpg”>
<img src=”??.jpg”>
<img src=”??.jpg”>
</div>

in CSS
div {width:300px; … …}
div img{margin-left:10px; … …}
div > img:first-child{margin:0; … …}
這板不論 css / html 就簡單清潔了～！　當然　：first-child　不只針對　img 標籤, 其他都可以用得上(如 <a> <strong> 等等… …)

當然! 如果是文字, 你又想設定第一個字, 你不可能每一個字都用標籤套著, 所以只是打上套著的標籤後加上就可以了。
例:
in HTML
<div>
How are you?
</div>

in CSS
div {width:300px; font-size:12px; … …}
div:first-child{font-size:15px; … …}

就可以做到你想要的設定。 另外, 還有 :first-line 看字面應該都明白, 是只第一行, 用法跟上面都是大同小異。

如果還有些對本文章不明白 / 或其中有什麼有修正的地方, 請回應本文章。 謝！