iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
4
Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列 第 19

::first-line 首行選取器 - 低調到不行的選取器

  • 分享至 

  • xImage
  •  

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧


有了首字之後,當然要來個首行選取器囉,首行選取器故名思義就是選取第一行的意思了,與前個選取器一樣是個被IE耽誤的僞元素選取器,使用方式就是直接讓被設定的物件內容第一行呈現你想設定的樣子,例如

HTML

<p>
Amos 不知道這個選取器到底有啥應用,所以今天的文章會很短,真是有夠難寫的一個選取器啊啊啊啊啊啊啊!這樣就算了,我還要花時間打出這樣一段文字好示範這個選取器的作用,真是無言啊
</p>

CSS

p::first-line{
	color: red;
}

上面這段原始碼可讓 HTML 中第一行的文字呈現紅色色彩,原本想玩看看是否能夠有像是 ::first-letter 類似的效果,但這個選取器對 CSS 可運的的屬性實在太少了,你無法對 ::first-line 設定 float,也無法對他做 absolute,他就是很純粹的設定第一行文字,永遠都只有第一行!

事實上網路上可見到一些簡單的應用實例,但其實這些實際的例子都可以用 ::before::after 替代,且 ::before::after 可做的變化比起 ::first-line 還要多上很多,那些例子也都不是非常的適合用在專案上,所以最後 Amos 真的覺得沒啥必要寫那些無用的例子出來浪費各位的時間,而至今 Amos 多年的經驗來說,仍舊沒有用得上這個屬性地方,就讓他繼續低調吧!(今天的文章也真的好低調啊...)

以上就是今天的 金魚都能懂的 CSS 選取器 - ::first-line 首行選取器 - 低調到不行的選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
:first-letter 首字選取器 - 玩轉首字設計的好功能
下一篇
:empty 空值選取器 - 比谷關的空氣更乾淨的選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言