first-line

:AFTER | :BEFORE | ::FIRST-LETTER | ::FIRST-LINE | ::SELECTION

::FIRST-LINE

對一小段文字的第一行，設計獨特的風格。只能用在區塊元素。

<style type='text/css'> .cls3 { width:250px; text-align:justify } .cls3::first-line {color:red; text-transform:uppercase; } </style> <p class='cls3'> Not ask what your country can do for you, ask what you can do for your country.</p>

改寫 ANCHOR，將 :hover, :active 狀態傳給子元素；如此在 IE6 中，也可以使用 :hover, :active 於一般元素。 <style type='text/css'> .akr {display:block; width:200px; color:white; } .akr:link {text-decoration:none; color:white; } .akr:visited {text-decoration:none} .akr:hover {background:black; color:white} .akr:hover P {border:solid 1px red} .akr:hover P:first-letter {font-size:2em; color:blue} .akr:active P {border:solid 4px green} .akr:active P:first-line {font-size:2em; color:red} </style> <a href='javascript:void(0)' class=akr> <p>Not ask what your country can do for you, ask what you can do for your country.</p> </a>

• 上例，在 Firefox 中 first-letter, first-line 失敗；IE6, Safari, Chrome 成功。
• 移到部落格後，在 IE6 出現 :link 的字不是白色的情形。

::SELECTION

使用者用滑鼠選一段文字，會應用此設計風格。Firefox 3.5 要用 ::-moz-selection；Safari, Chrome 要用 ::selection。此項可使用的特徵有 color, background, background-color；background-image 及其它特徵會被忽略。此項可能會從 CSS3 的草稿中拿掉。 <style type='text/css'> .sel::selection {color:blue; background:red; font-size:200%; } .sel::-moz-selection {color:blue; background:red; font-size:200%; } </style> <p class='sel'> 請用滑鼠選一段文字：射擊遊戲，賽車遊戲，益智遊戲，好玩遊戲，武打遊戲。</p>

• IE6 無此項；Firefox, Safari, Chrome 皆成功。
• 上例中的 font-size 被忽略。