[轉職軟體工程師、自學程式語言] 什麼是 CSS ? 第二章 : Selectors

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/ 

我們今天講的主題是, 什麼是 CSS,大綱如下


第一章 : The Basics

第二章 : Selectors

第三章 : Layout

第四章 : Stacking Order




就是用 classid,選擇你要指定調整樣式的部分

只有連結到這個網站的才做應用 a=[href="http://www.example.com"] { }

可以使用 :nth-of-type(3) { } 來指定是第幾個你要調整它的樣式,或者用 first-child 或者 last-child 

可以使用 ::first-letter { } 來指定第一個字你要調整它的樣式

可以使用 :hover { } 滑鼠移上去時你就變成紅色,等等的一些效果。

如何解決衝突,就是去看他的優先順序

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



第二章 : Selectors

就是用 classid,選擇你要指定調整樣式的部分

87.png

88.png

89.png

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



只有連結到這個網站的才做應用 a=[href="http://www.example.com"] { }

90.png

91.png

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



可以使用 :nth-of-type(3) { } 來指定是第幾個你要調整它的樣式,或者用 first-child 或者 last-child 

92.png    或      94.png

93.png

95.png

96.png

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



可以使用 ::first-letter { } 來指定第一個字你要調整它的樣式

97.png

98.png

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



可以使用 :hover { } 滑鼠移上去時你就變成紅色,等等的一些效果。

99.png

100.png

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/



如何解決衝突,就是去看他的優先順序

1、可以用 ! importance 來註明

2、有 id 的會最優先,如果都有 id 的話就看它有幾個 ( 一步一步來判斷哪個優先)

3、如果都一樣,那就看你的 code 哪個是後寫的

image

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


第一章 : The Basics

第二章 : Selectors

第三章 : Layout

第四章 : Stacking Order

部落格轉移,給讀者更好的閱讀體驗,本文網址 : https://janstockcoin.com/blog/


痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com/

如果您喜歡我的文章,請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)

回饋由 Likecoin 基金會出資,您只要註冊/登入帳號(fb、google帳號都可以註冊,不超過1分鐘),按五次左鍵,可以贊助我的文章且完全不會花到錢!若願意成為讚賞公民那是十分感激。
支持創作,正向交流:)

留言

這個網誌中的熱門文章

如何開始 Podcast 製作教學 5大步驟 ! 不需任何成本方法

[Udemy推薦課程] Day 2 The Web Developer Bootcamp 2021 [轉職軟體工程師,自學程式語言]

2021年一夜致富,市值60億美元, 什麼是以太坊經典 ETC