接下來的 CSS 教學我們來學習 CSS 的三大特性，為什麼要學習這三大特性呢? 這是因為你到時候在開發中一定會碰到很多很多的奇怪的 CSS 問題，如果你不知道為什麼是這樣子，我敢肯你真的會開始懷疑人生，甚至直接放棄不學習 CSS 了，這些問題都可以先規劃成這三大特性分別是層疊性、繼承性、優先級，每個環節都很重要，學完這章節就能大大解決你以前碰到的一些 CSS 問題唷!
- CSS 層級問題又什麼用?
- CSS 繼承性問題有什麼用處?
- CSS 優先級你知道誰會先被執行嗎?
- CSS 行高有繼承性?
- CSS 有屬性權重問題你知道誰權限最大嗎?
CSS 層疊性是什麼?
你知道 CSS 層疊性在什麼樣的場景會被使用嗎? 其中會給相同選擇器給予設置相同的樣式，這時候一個樣式就會覆蓋 ( 層疊 ) 另一個相同樣式唷! 如果你搞不清楚層疊性沒關係其實就是只是覆蓋性，那你往後網站一定會越來越複雜真的會搞不清楚在相同的樣式後，到底會怎麼顯示你賦予的 CSS 屬性的。
我們直接來動手寫個 HTML 骨架結構，創一個 <div> 盒子標籤，裡面隨便打幾個字以便於等等的觀察
<body>
<div>
我是盒子唷!
</div>
</body>
創建好 HTML 骨架結構後，我們來給予 CSS 屬性樣式，這次是給予兩個想同值並測試層疊性 ( 覆蓋性 ) 到底是誰會被賦予背景顏色呢? 那我們就給這個 <div> 盒子標籤，背景顏色一個紅色和一個藍色，這邊你停下來思考到底最後這個 <div> 盒子標籤會被賦予什麼顏色呢? 你可以先好好想想看。
<style>
div {
color: red;
}
div {
color: blue;
}
</style>
這樣子寫好 CSS 相同的 CSS 選擇器都是指定同一個 <div> 盒子標籤，這你沒問題吧! 然後又指定相同的樣式，那下達了第一個命令給背景顏色紅色，在下達另一個命令給藍色，那倒底會變成什麼顏色呢? 答案是藍色，那為什麼呢? 那我們就要來看看 CSS 之中的層疊性 ( 覆蓋性 ) 規則了。
CSS 層疊性 ( 覆蓋性 ) 規則
- 當樣式衝突，會遵守就近原則，哪個 CSS 樣式離 HTML 結構骨架近，就執行哪一個 CSS 樣式
- 樣式不衝突，就不會層疊 ( 覆蓋 )
那這樣知道了吧! 但前提是要 CSS 樣式必須層疊 ( 覆蓋 ) 才會觸發唷! 觸發後你只要找誰的 CSS 樣式最近的那個會執行該層疊 ( 覆蓋 ) 的屬性值就對了，所以在上面那個例子才是執行背景顏色為藍色，如果你不確定的話你可以自己動手打打練習看看，看是不是最後呈現在網頁中的效果是如何，看不出來你可以在網頁中按 F12 或是滑鼠右鍵選擇「檢查」，並找到該 CSS 屬性代碼，你一定會看見最遠的那一個相同 CSS 屬性被瀏覽器劃掉的。
我們在創建一個 HTML 骨架結構，寫一個 <div> 盒子標籤，裡面隨便打幾個字以便於等等的觀察。
<body>
<div>
我是盒子唷!
</div>
</body>
剛剛我們不是已經看過兩個想同值並測試層疊性 ( 覆蓋性 ) 到底是誰會被賦予背景顏色，那我們就給這個 <div> 盒子標籤，這次背景顏色一個紅色裡面還改了字體大小 18px 和一個是設置藍色，這邊你停下來思考到底最後這個 <div> 盒子標籤會被賦予什麼顏色呢? 還有字體大小到底會有還是沒有呢?!
<style>
div {
color: red;
font-size: 18px;
}
div {
color: blue;
}
</style>
結果字體大小會改成 18px 背景顏色變成藍色，為什麼呢? 是因為如果不發生 CSS 樣式衝突就一樣會執行該 CSS 屬性值，雖然我們都同時給 <div> 盒子標籤 CSS 屬性，但是相同的是 color ( 背景顏色 ) 而 font-size ( 字體大小 ) 有和另一個 div 選擇器裡面的 CSS 選擇器衝突嗎? 沒有吧! 所以這樣你知道了吧，只要沒衝突就會繼續賦值給 HTML 結構骨架唷!
點我瞭解 小青如何每月多賺5位數台幣CSS 繼承性是什麼?
繼承從字面上就能夠理解，就像你繼承你爸爸的姓氏，你不會平白無辜去改姓吧! 而在 CSS 中也有繼承性的問題，通常子標籤會去繼承父標籤的某些 CSS 樣式，如文本的顏色和字體，在你剛學習 CSS的時候其實你就不斷的再使用到 CSS 繼承性了，只是當時你沒有考慮那麼多，下列我們來看看實際的例子吧。
首先我們先創建一個 HTML 結構骨架，需要一個 <div> 盒子標籤，盒子裡面包覆一個 <p> 段落標籤，很簡單的一個 HTML 結構骨架，我相信你會寫吧!
<body>
<div>
<p>我是盒子唷!</p>
</div>
</body>
寫好 HTML 結構骨架我們再來寫個 CSS 屬性，我們給 <div> 盒子標籤一個文本顏色為紅色以及字體大小為 20px 那來看看 <p> 段落標籤會繼承它的父親嗎? 這邊你應該知道 <p> 段落標籤的父親是 <div> 盒子標籤吧! 這裡我們沒有給 <p> 段落標籤 CSS 屬性值，結果它會發生改變嗎?
<style>
div {
color: red;
font-size: 20px;
}
</style>
答案是 <p> 段落標籤會繼承它的父親 <div> 盒子標籤裡頭的 CSS 屬性，也就是說子標籤會去繼承父標籤裡面的 CSS 屬性，如果不相信你在呈現出來的網頁中按 F12 或是滑鼠右鍵選擇「檢查」，並找到該 CSS 屬性代碼，你一定會看見有一個項目寫著 Inherited from div 這就是寫繼承來自於 div，所以 <p> 段落標籤就繼承了父親的 CSS 屬性了
- 恰當的使用繼承性能夠簡化代碼，降低 CSS 樣式的複雜性
- 子標籤會繼承父標籤某些樣式
- 能繼承的幾乎都是文字相關的 CSS 屬性
- 能繼承的有哪些呢?
- text ( 文本屬性 )
- font ( 字體屬性 )
- line ( 行高屬性 )
- color ( 顏色屬性 )
CSS 行高繼承是什麼?
接下來也是介紹繼承性問題，這是比較特殊的一種繼承性是行高繼承性，上一節我們不是已經知道子標籤會去繼承父標籤的問題嗎?
首先我們先創建一個 HTML 結構骨架，需要一個 <div> 盒子標籤以及一個 <p> 段落標籤，很簡單的一個 HTML 結構骨架
<body>
<div>我是盒子唷01</div>
<p>我是盒子唷02</p>
</body>
創建好 HTML 骨架結構後，我們來給予 CSS 屬性樣式，讓 <div> 盒子標籤以及 <p> 段落標籤繼承紅色，以及改變字體的大小還有呈現方式還有行高問題，那這樣這兩個子元素都會去繼承父親的樣式，理想來說是這樣，但我們還是要看網頁是不是會這樣去呈現給我們。
<style>
body {
color: red;
font: 20px/24px 'Microsoft YaHei'
}
</style>
結果看起來好像是有改變，如果不清楚這時候在網頁中按 F12 或是滑鼠右鍵選擇「檢查」，並找到該 CSS 屬性代碼就能夠看見真的有改變了! 行高也繼承 24px 行高，OK! 這邊你都沒問題吧! 那我跟你說一般前端人員會這樣寫 1.5 在行高的地方處是寫不帶單位的寫法，如下表示
<style>
body {
color: red;
font: 20px/1.5 'Microsoft YaHei'
}
</style>
如果小青我寫不帶單位的你覺得是什麼呢? 你可以想想看，就是 1.5 倍行高，剛剛最前面寫法就是指定有單位的寫法，那沒寫單位就倍數，會計算字體大小乘以倍數就等於顯示的行高唷! 所以這邊計算是 20px * 1.5 就是 30px 行高，簡單來說就是當前元素的 1.5 倍行高，你打開網頁看看是不是真的有 30px 行高，下列我們再看看這個例子。
<style>
body {
color: red;
font: 20px/1.5 'Microsoft YaHei'
}
div {
font-size: 14px
}
</style>
你認為 <div> 盒子標籤的行高是多少呢? 行高會顯示 21px ( 像素 )，因為會繼承當前的父親元素 <body> 標籤的行高 1.5 倍然後你在乘以當前 <div> 盒子標籤字體大小 20px 就會是 21px ( 像素 ) 唷!
- 行高可以跟單位也可以不跟單位
- 行高不跟單位是使用倍數，算法是計算當前元素字體大小乘以倍數就是行高大小
- 孫子看向爸爸、爸爸看向爺爺，想成姓氏關係
CSS 優先級是什麼?
優先級有什麼特別的場景呢? 在當同一個 CSS 屬性元素同時指定多個選擇器，就會發生有優先級問題出來了，因為你會搞不清楚到底是會執行哪一個選擇器了唷! 開始產生混亂，我們一樣直接舉例子吧! 首先創建一個 HTML 骨架結構，在這裡面我們新增一個 <div> 盒子標籤就可以了。
<body>
<div class="text">我是盒子唷01</div>
</body>
CSS 屬性我們寫個控制 <div> 盒子標籤選擇器和一個是使用 Class 選擇器控制，我們來看看到這個 <div> 盒子標籤會被賦予紅色還是藍色，你想想看會被賦予哪一個顏色呢?
<style>
div {
color: red;
}
.text {
color: blue;
}
</style>
你可能會想這應該會有原則吧! 沒錯的不同選擇器都有不同的權重，權重越高代表優先級越高
- 選擇器相同，會執行層疊性 ( 覆蓋性 )
- 選擇器不同，會執行選擇器權重高的先執行
| 選擇器名稱 | 選擇器權重大小 |
| 繼承 或是 * | 0, 0, 0, 0 |
| 元素選擇器 | 0, 0, 0, 1 |
| class(類選擇器)、偽類選擇器 | 0, 0, 1, 0 |
| ID選擇器 | 0, 1, 0, 0 |
| 行內樣式 style=”” | 1, 0, 0, 0 |
| !imporyant 重要的 | 無限大 |
有了這表後我們再回過頭去看你應該會有答案了吧! class ( 類選擇器 ) 權重高於元素選擇器，所以會執行字體顏色改變成藍色，那我們再改變一下權重，這次把剛剛那個 HTML 結構骨架新增一個 ID 選擇器 text02 然後把 CSS 屬性值也新增一個 ID 選擇器看看結果會是如何呢?!
<style>
div {
color: red;
}
.text {
color: blue;
}
.text02 {
color: green;
}
</style>
結果是什麼呢? 當然是 ID 選擇器權重大於 class ( 類選擇器 ) 和元素選擇器，你可以自行都去試試看那個表中裡面所有的權重優先級看是不是真的是這樣呢!? 其中你沒碰過的是 !imporyant ( 重要的 ) 它要怎麼使用呢? 其實不難我們直接使用在元素選擇器，它是不是在裡面權重是最低的 0,0,0,1，這時候你只要加入 !imporyant 直接權重會變最大沒人能比得上它。
<style>
div {
color: red!imporyant;
}
.text {
color: blue;
}
.text02 {
color: green;
}
</style>
CSS 優先級該注意什麼?
每個元素都會有自己的優先級，使用前一定要先搞清楚才不會你使用後，才去發現權重沒高於前者使不出 CSS 屬性出來下列列出一些你該注意的點給你。
- 權重由 4 組數字組成，但是不會進位
- 相同元素假設是 0,0,0,1 + 0,0,0,1 結果 0,0,0,2 唷!
- ID 選擇器永遠就是大於類選擇器
- 等級判斷是由左到右，某數值相同在比下一位
- 繼承的權重是 0
- 父元素權重多高，子元素繼承永遠權重是 0
CSS 優先級權重疊加如何疊?
再前面我們都是單單使用一個元素或是 class 選擇器或是 ID 選擇器，問題是後面網站設計越來越複雜我們都會使用複合選擇器去撰寫或是進行控制，如果你忘記什麼是複合選擇器你可以先去之前小青我專門寫一篇有關複合選擇器的 CSS 教學文章複習一下，複習完後再回來比較會有概念的!
那今天我們使用複合選擇器就會開始出現權重的疊加，也就是說某個 HTML 結構骨架你需要給他設置 CSS 屬性時，該 HTML 結構有給個 class 類選擇器，又用到元素選擇器去控制這樣是不是有兩種權重，那這樣你就需要把這兩種的權重給加起來，就是當前權重的數值，如果你需要再去賦值的話你就必須高於當前權重數值唷! 下列我們來做手試看看吧!
我們創建一個 HTML 結構骨架，在裡面寫一個 <ul> 無序列表標籤，裡面在包三個 <li> 列表標籤
<body>
<ul>
<li>我是列表01</li>
<li>我是列表02</li>
<li>我是列表03</li>
</ul>
</body>
寫好後我們再來寫 CSS 屬性樣式如果我們給 <li> 列表標籤紅色，是不是存檔後 HTML 網頁成現出來的效果 <li> 列表標籤裡的內容是不是紅色呢? 是吧! 沒錯吧! 我相信你也懂得。
<style>
li {
color: red;
}
</style>
接下來我們要開始在使用複合選擇器囉! 這次我們新創一個選擇器這次控制 <ul> 的 <li> 那我問你現在呈現在 HTML 網頁中是什麼顏色的效果呢? 你仔細想想看，答案是綠色沒錯吧! 為什麼變成綠色呢? 是因為值形先後順序嗎? 並不是你自己可以互相調換看看還是會呈現綠色唷! 那也就是 <ul> <li> 複合選擇器權重高於前者你可能就會有疑問了。
小青你不是說元素標籤權重是 0,0,0,1 那兩個都是呀? 為什麼會變綠色呀? 因為是權重還能夠進行疊加，下列是不是使用到 2 個元素標籤，所以是 0,0,0,1 + 0,0,0,1 結果是 0,0,0,2 明顯權重是高於使用單一個元素標籤，現在之前不懂是不是瞬間想明白啦! 是不是不難呀!
<style>
li {
color: red;
}
ul li {
color: green;
}
</style>
那我們來看看其他權重效果囉! 如果還不會沒關係再透過這個例子給你思考，那 HTML 結構骨架我們在使用之前的，但是這次在 <ul> 無序列表標籤給與 class 類選擇器命名，命名為 text。
<body>
<ul class="text">
<li>我是列表01</li>
<li>我是列表02</li>
<li>我是列表03</li>
</ul>
</body>
CSS 屬性我們在加上一個新的複合選擇器後這個複合選擇器是由 class 類選擇器和元素選擇器所構成，CSS 屬性給予 color 藍色這邊問問你最後再網頁呈現出來的效果是什麼顏色呢? 想想看你的答案是什麼呢? 答案是藍色，為什麼呢? 那是因為 class 類選擇器權重是 0,0,1,0 而元素選擇器 0,0,0,1 兩個加起來是 0,0,1,1 很明顯又大於前者 0,0,0,2 雙元素標籤，如果不相信是藍色你可以試試看到底網頁會呈現什麼顏色唷!
<style>
li {
color: red;
}
ul li {
color: green;
}
.text li {
color: blue;
}
</style>
要記住權重累加是不會進行進位，因為這是組數字是個別獨立的，不管怎麼加都是獨立在該處唷!
快速練習權重累加練習:
- div ul li 權重是多少呢?
- .text ul 權重是多少呢?
- #demo #text li 權重是多少呢?
- a:hover 權重是多少呢?
權重累加例子答案:
- 0,0,0,3
- 0,0,1,1
- 0,1,1,1
- 0,0,1,1
CSS 三大特性總結
在本篇 CSS 教學我們學習了 CSS 中三大屬性，你知道有哪三大類嗎? 分別是什麼呢? 在 CSS 中什麼是層疊 ( 覆蓋 ) 問題呢?，在 CSS 中什麼是繼承性? 什麼又是權重問題呢? 其中 CSS 繼承是都會繼承父親所有東西嗎? CSS 權重有什麼樣的規則可以進行判斷呢? 你能說出個選擇器的權重由哪四個數組成的嗎? 最重要的事權重累加會進行進位嗎?
以上這些問題你都能回答的行雲流水就說明你學的不錯，如果忘記了也沒關係嘗試多練習並在不會的地方多想想看為什麼卡住了，多舉一些例子給自己練習在看看呈現出來的效果是不是如自己所預期呢! 你並不要因為卡住而灰心，因為卡住的時候就代表是要比之前更厲害了，給自己一點時間吧! 我相信你可以的加油，共勉之。
點我瞭解 小青如何每月多賺5位數台幣
能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青