參考網站:
https://developer.mozilla.org/zh-TW/docs/Glossary/CSS_Selector
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://selflearningsuccess.com/css-combinators/

Type selector類型選擇器elementname⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

****解釋:
這邊刻意不讓p以及div以及a標籤被定義,好讓以後要選擇不被定義的標籤時可使用

刻意保留p標籤皆未定義文字狀態,用於往後實例

刻意保留div標籤皆未定義文字狀態,用於往後實例
刻意保留a標籤皆未定義文字狀態,用於往後實例

定義全部的 <...> 元素⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

Here's a span with some text.

X Y 類似X > Y,但X Y中間可參雜其他標籤,而X > Y中間無法參雜其他標籤⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

寫在.html檔案中之標籤各個獨立開來、寫在.css檔案時,則將.html中之多個獨立的標籤組合在一塊兒⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

依照div p順序定義內部文字狀態 補上Span標籤於前述已經定義過

p div順序無定義內部文字狀態 補上Span標籤於前述已經定義過

雖然div p中間夾有code,依舊可制定內部文字狀態 補上Span標籤於前述已經定義過

X > Y⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

依照div a順序定義內部文字狀態 補上Span標籤於前述已經定義過
因為div a中間夾有code,因此無制定內部文字狀態 補上Span標籤於前述已經定義過

Class 選擇器⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

****解釋:
即便span已經於前述tag中的Type selector被設定過,但class再次對其定義,則會由class的定義覆蓋Type selector的定義
****解釋:
寫在.css檔案中之class標籤各個獨立開來、 [瑋倫推薦]寫在.html檔案中則將.css中之多個獨立的標籤組合在一塊兒

****並未摻入class:

This is just a regular paragraph.



****摻入 甲 class:

This paragraph has 橘色 text.

****同時具有 甲、乙 兩個class的特性:
Willy is me. Wei-Lun
****同時具有 甲、丙 兩個class的特性:
Sandy is sister. Yu-Shan Liang
****同時具有 甲、丁 兩個class的特性:
Tsair is father. Tsair Chun Liang

****同時具有 甲、戊 兩個class的特性:

This paragraph has red text and "fancy" styling.

Sandy is sister. Yu-Shan Liang

ID 選擇器[瑋倫推薦]⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

因為div已經於前述tag中的Type selector被設定過,但class再次對其他的性質(背景色彩)進行定義,則會延續前述Type selector的定義:
This div has a special ID on it!

即便div已經於前述tag中的Type selector被設定過,但class再次對其定義,則會由ID的定義覆蓋Type selector的定義:
This div has a special ID on it!

狀態選擇器⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

This paragraph contains a link: 點擊href="#"就是跳到本頁最上方This link will turn red while you click on it. The paragraph will get a gray background while you click on it or the link.

瑋倫自製範例 9999999999999999999999999999999999999999999999999999999999

點擊圖片得到連結⬛⬛⬛⬛

滑鼠移到連結下方得到底線⬛⬛⬛⬛⬛⬛⬛⬛

WILLY

瑋倫自製範例6666666666666666666666666666666666666666666666666666666666

星號*代表選擇所有元素,搭配ID 選擇器⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

因為div已經於前述tag中的Type selector被設定過,但class再次對其他的性質(背景色彩)進行定義,則會延續前述Type selector的定義:
此處並未藉由標籤標註 caday 此處並未藉由標籤標註2 有標籤處 此處並未藉由標籤標註3

救命啊~

此處並未藉由標籤標註4

⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛

⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛