iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
3
Modern Web

前端路上那些重要與不重要的小事系列 第 24

Day24:小事之 CSS 偽類 與 偽元素

先來個比較表

. 符號 . . 作用
偽類 : 不是元素 不會出現在 DOM tree 用於定義元素的特殊狀態
偽元素 :: 是元素 會出現在 DOM tree 用於選擇元素的指定部分

為什麼使用

在 W3C 文件中對這兩者有使用的說明

偽類(Pseudo-classes):為了選擇 DOM tree 之外的信息,或者使用其他簡單選擇器不能表達的信息。例如:設定滑鼠滑過的樣式(:hover)、被訪問過的連結的樣式(:visited)。

偽元素(Pseudo-elements):創造一個關於 DOM tree 的抽象內容,提供一種方法來引用源文檔中不存在的內容。例如:指定第一行或第一個字。目前多是用 :before :after 來做一些特殊效果,之後再另外示範。

所有的偽類 與 偽元素

W3C 官網中有列出所有的偽類與偽元素,並個別說明用法,在此就不多做說明。

偽類

  • 動態::link:visited:hover:active:focus
  • 目標::target
  • 語言:lang
  • UI元素狀態::enabled:disabled:checked
  • 結構::root:nth-child:nth-last-child:nth-of-type:nth-last-of-type:first-child:last-child:first-of-type:last-of-type:only-child:only-of-type:empty
  • 否定::not

偽元素

::first-line::first-letter::before::after

偽元素的 content 無用小實驗

在剛學會使用偽元素的時候,覺得偽元素相當有趣,其中一個是對於 content 屬性的使用。
偽元素的使用一定要有 content Property,不然不會有任何效果,而 content Property 可以放文字,如下:

.box:after{
     content: '國立故宮博物院 國立故宮博物院的收藏,承襲自宋、元、明、清四朝宮中收藏,質量兼備。 '
}

但是如果我想要在特定地方斷行怎麼辦呢?
例如上面的例子,我想要在第一個 國立故宮博物院 後面就斷行該怎麼辦?

可以在第一個國立故宮博物院的後面加上 \A,再加上 white-space: pre-line
這樣斷行之後的文字還是可以自動摺行。

.box:after{
     content: '國立故宮博物院 \A 國立故宮博物院的收藏,承襲自宋、元、明、清四朝宮中收藏,質量兼備。 ';
     white-space: pre-line;
}

試玩小範例

可以自行試試 white-space 的值,如果換為其他的值有何效果。
white-space 之後有時間會再另外做說明。

不過,這個小實驗有點無用,純粹好玩而已,為什麼這麼說呢?
因為 CSS 內的文字不會有 SEO ,所以把文字做在 CSS 內對網站的 SEO 不會有加分,所以想要有說明文字,可以用別的方式來做比較適合。

以上是今天的偽類 與 偽元素的簡單介紹,明天會介紹比較詳細的 content 使用方式。
各位看倌明天見囉~

參考資料:
[1] Pseudo-classes - w3.org
[2] Pseudo-elements - w3.org


上一篇
Day23:小事之 CSS hacks
下一篇
Day25:小事之 CSS 偽元素 與 content Property
系列文
前端路上那些重要與不重要的小事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言