My Program

報紙或雜誌的編排上, 有時會有首字放大或特別編排的效果, 如何能達成這樣的編排呢? 可以使用 CSS 中的 ::first-letter 的 psuedo element, 這個在 CSS1 起就可以使用了. 只是到了 CSS3 需要兩個 : (冒號), 之前僅有一個 : (冒號).

另外若是需要達成, 僅第一段落才需要首字大寫, 可以使用 :first-child 的 psuedo element 即可, 也就是以 p 為例, 選擇器可以使用:

p:first-child::first-letter

即可, 不過可以套用的屬性以文字為主, 另外還有一個有趣的地方, 就是一定是字才行, 標點符號會不當做字, 與第一字一起發生作用, 可以參考這個範例:

https://codepen.io/timhuang/full/dQwWxP/

以 article 來看, 就是僅第一個段落的第一個文字大寫, 而 article 2 來看, 則是每個段落開頭都大寫.

參考資料:
https://www.w3schools.com/cssref/sel_firstletter.asp
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html

補充資料:

若添加的<h2>xxx</h2>元素到 article 裡, 發生了有趣的效果, 就是 p:first-child, 會選擇不到元素, 原因為 p:first-child 是指該 p 的 parent 的 first child, 但第一個 child 是 h2, 所以就選擇不到了, 可以參考這個範例:

https://codepen.io/timhuang/pen/yQGXoG

其中 article2 則是正常, 而且 h2 也不會首字大寫.

若要解決這個問題, 可以利用指定 type 的方式, 如 ::first-of-type 這個 psuedo class, 也就能指定元素了, 如 p::first-of-type 這樣, 參考這個範例:

https://codepen.io/timhuang/pen/YRdxPE

補充資料[2018/12/5]

單冒號與雙冒號選擇器的差異, 單冒號(single colon)使用於偽類別(psuedo class), 而雙冒號(double colon)使用於偽元素(psuedo element), 可以參考這兩篇:

https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
https://css-tricks.com/to-double-colon-or-not-do-double-colon/