2021/11/02（二）
線上課程 網頁開發 學習進度 進度紀錄 62/554。
https://www.udemy.com/...
062、Pseudo-elements

上一噗：

@MajimeF - 2021/11/01（一） #線上課程 #網頁開發 #學習進度 #進度紀錄 61/...

此課程 書籤噗 ：

@MajimeF - #書籤噗 #線上課程學習紀錄 #網頁開發

Pseudo-elements - CSS: Cascading Style Sheets | MDN

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

是一個 keyword，被加在 selector 的後面，它讓你可以在你所選取的這些 elements 的非常特定的地方加入 styling。

程式碼前面會有兩個冒號（::）
Pseudo-classes 是一個冒號（:）

【CSS FAQ】偽元素 (pseudo element) 和偽類 (pseudo class) 差在哪...
有人問不同點，說在於元素本身存在與否…
不過從之前給得定義來看，
class 是「標籤狀態改變時」動作。
element 是「在非常特定的地方加入樣式」。
可直接呈現，不用什麼狀態改變。

【::before】
在最前面加入樣式。

例：
p::before {
content: ">>";
color: red;
}

content 內容
在<p>前面加入指定內容：>>

所有<p>段落前面都會出現「>>」。

MDN：

::before (:before) - CSS: Cascading Style Sheets | M...

【::after】

::after (:after) - CSS: Cascading Style Sheets | MDN

在最後面加入樣式。

跟 ::before 同理。一前一後。

h1::after {
content: "↓";
color: red;
}

這樣就在<h1>最後加上紅色的「↓」。

【First-letter】

::first-letter (:first-letter) - CSS: Cascading Styl...

first-letter 首字。
加入指定樣式。

p::first-letter {
font-size: 2.5rem;
}

font-size 文字大小
rem 倍率

效果：首字2.5倍大。

效果圖：

報章雜誌常見的效果。

【Selection】

::selection - CSS: Cascading Style Sheets | MDN

selection 選取
::selection 改變選取時的樣式。

*::selection {
background-color: greenyellow;
}

selection 選取
background-color 背景顏色
選取時的背景顏色＝反白顏色。

把反白改為綠黃色。

效果圖：


如果要改反白後的文字顏色：

::selection - CSS（层叠样式表） | MDN

像這樣…

*::selection {
color: blue;
background-color: greenyellow;
}

選取框（反白）綠黃色。
文字藍色。

下一噗：

@MajimeF - 2021/11/03（三） #線上課程 #網頁開發 #學習進度 #進度紀錄 63/...