參考網站:
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⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
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!
狀態選擇器⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
瑋倫自製範例 9999999999999999999999999999999999999999999999999999999999
點擊圖片得到連結⬛⬛⬛⬛
滑鼠移到連結下方得到底線⬛⬛⬛⬛⬛⬛⬛⬛
WILLY
瑋倫自製範例6666666666666666666666666666666666666666666666666666666666
星號*代表選擇所有元素,搭配ID 選擇器⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
因為div已經於前述tag中的Type selector被設定過,但class再次對其他的性質(背景色彩)進行定義,則會延續前述Type selector的定義:
此處並未藉由標籤標註
caday
此處並未藉由標籤標註2
有標籤處
此處並未藉由標籤標註3
救命啊~
此處並未藉由標籤標註4
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛