--- title: CSS樣式權重和選擇器的關係 tags: CSS --- <style> .red{ color:red; font-size:20px; } </style> ## 懶人包: 權重 !important >inline style > ID > Class > Element > * > 瀏覽器 ### 介紹 在所有瀏覽器都會有自己的預設值 文字大小各不相同 為了解決這個問題 權重就顯得非常重要 [教材](https://drive.google.com/drive/folders/12IaojXe99kmBX2yB6uaQwimhOiQTN5aB?usp=sharing) # 基本權重介紹 本文將由右至左開始解釋 其中包含例子2-5題 權重並沒有進位這個條件 幾百個相同東西也不會贏過大哥 雖然以前有一個255個class會贏過 一個id 但是只有IE會觸發所以這是一個BUG 經過我剛剛的測試 800個class也沒贏一個id 所以基本上以下克上是不存在的,可以完全忽略不記 ## *號 比瀏覽器的權重高一層 在前提介紹有說瀏覽器都擁有自己的<font class="red">樣式</font>預設值 為了解決他 通常會利用`*`號和reset去解決 [css Reset](https://meyerweb.com/eric/tools/css/reset/) (reset會在標籤那邊介紹 - [標籤](#Element) 用法 `*`號 代表選取全部 所有的標籤都會吃到這個*號裡面的CSS 作法 ```css= *{ /* css */ ...; ...; ...; } ``` ### 實戰做法 例 css1.html ```htmlmixed= <style> * { } </style> <body> <!-- 以下做法就是div裡面寫一個數字+div再寫一個數字 一直重複9次 --> <!-- 在css說法就會說包10層 但是根據以前老師說法為了效能盡量不能超過6層 --> <div> 1 <div>2 <div>3 <div>4 <div> 5 <div>6 <div>7 <div> 8 <div> 9 <div> 10 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> ``` 還沒給樣式的版本 結果 ![](https://i.imgur.com/sP7WNsI.png) 添加樣式 ```htmlmixed= <style> * { color: red; } </style> <body> <!-- 以下做法就是div裡面寫一個數字+div再寫一個數字 一直重複9次 --> <!-- 在css說法就會說包10層 但是根據以前老師說法為了效能盡量不能超過6層 --> <div> 1 <div>2 <div>3 <div>4 <div> 5 <div>6 <div>7 <div> 8 <div> 9 <div> 10 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> ``` 結果: ![](https://i.imgur.com/tAviDtR.png) 從這結果來看,很明顯全css都吃到了 ## Element 比`*`號高一級 偏向輔助補權重作用 經典使用方式css reset全都是使用標籤來設定 ```css= /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ``` ### 原因 因為`*`代表全部 通常使用在更廣泛的設定 而標籤reset是為了針對性去做預設值 我指定誰誰誰標籤就是甚麼預設值 例如:p/span/i/...之類的 p針對文字 span針對動態文字 i針對icon 這種的都會使用標籤來做預設值 他是針對性標籤而權重最低的方式了 ### 實戰 p.s提醒我要說reset和瀏覽器預設值實際改動在哪 例一 css2.html ```html= <style> * { color: red; } div { color: aqua; } </style> <body> <div> 1 <p>2<span>3 <i>4</i> </span></p> </div> </body> ``` 如果這樣寫div的預設值 從直覺大多數人可能都會覺得1234都會是aqua色對吧? <!-- ![](https://i.imgur.com/nEQS6pY.png) --> 但是事實不會是這樣 原因是這樣的 在css裡面還有文字 父層影響子層的權重 針對文字樣式的權重 會是這樣 <font class="red"> *(因為`*`號一定選的到他) > 父層 > 瀏覽器</font>(前提他沒有被樣式設定) 這個很常用 如果他父層有2個呢? 會選擇離他更親的父層 例二 css2.html ```html= <style> /* 例一 */ /* * { color: red; } div { color: aqua; } */ /* 例二 */ p { color: red; } div { color: aqua; } </style> <body> <!-- <div> 1 <p>2<span>3 <i>4</i> </span></p> </div> --> <!--例二 --> <div>1 <p> 2 <span> 3 </span> </p> </div> </body> ``` ![](https://i.imgur.com/B5cIWuW.png) 沒錯吧 文字樣式是特別的會受父層影響(~~私生子~~) 有可能有別的也是特別的 但是寫這篇文章想不到還有誰 所以只要記得 有這麼一個特殊的存在 ## Class 這是一個超級常用的東西 通常用在復數區塊 在一個網頁裡面一個div可能會有上百個 但是我只想要裡面的幾張卡片的哪個div要有某些樣式 這樣用標籤就沒辦法指定了(其實還是可以,只是很麻煩,如果有興趣 傳送門-[偽類選擇器](#nth-child(odd/even/n/an+b/an-b))) p.s框架概念也是這樣 ### 實戰 例一 css3.html ```htmlmixed= <style> /* 例一 */ * { color: red; } div { color: aqua; } .blue { color: blue; } </style> <body> <!-- 例一 --> <div> 1 <div> 2 <div class="blue"> 3 <span>4</span> </div> </div> </div> </body> ``` ![](https://i.imgur.com/WgAwZAd.png) 根據 <font class="red"> *(因為`*`號一定選的到他) > 父層 > 瀏覽器</font> 所以結果是預料沒問題的 span被父層包但是他有`*`號 他已經被`*`號選擇了,父層就改不了他,用大魔王也不行 例二 css3.html ```htmlmixed= /* 例二 */ <style> .blue { color: blue; } .red { color: red; } .green { color: green; } </style> <body> <!-- 例二 --> <div> <div class="block"> <div class="blue"> 1 </div> <div class="red"> 2 </div> <div class="green"> 3 </div> </div> <div class="block"> <div class="blue"> 1 </div> <div class="red"> 2 </div> <div class="green"> 3 </div> </div> <div class="block"> <div class="blue"> 1 </div> <div class="red"> 2 </div> <div class="green"> 3 </div> </div> </div> </body> ``` 這就是所謂的復用 結果 ![](https://i.imgur.com/cKLVKMW.png) ## ID ID整個頁面唯一的存在(如果有兩個) 權重>class 也是JS常用的東西 效能最好 但是不能重複 一旦重複雖然可以用 效能會變差跑分也會變很低 在程式那邊會有問題 用Document.getElementById() 會抓到最後一個 不會是一個陣列 ID只差在程式 在css那邊他也會class來做 ### 實戰 例一 ```htmlmixed= <style> #aa { color: red; } .eee { color: blue; } </style> <body> <div id="aa">1</div> <div id="aa">2</div> <div id="aa" class="eee">2</div> <div id="aa">2</div> </body> ``` 結果 ![](https://i.imgur.com/QFlXYyH.png) 雖然是正常的 但是在程式那邊要抓aa會出問題 所以正常來說ID一定是唯一的存在 例二 css4.html ```htmlmixed= <style> #a1 { color: red; } .eee { color: blue; } #a3 { color: chartreuse; } </style> <body> <div id="a1">1</div> <div id="a2">2</div> <div id="a3" class="eee">2</div> <div id="a4">2</div> </body> ``` ![](https://i.imgur.com/rMdmmfc.png) 因為ID權重比較大 所以class被蓋過去了 ![](https://i.imgur.com/YvEtFnG.png) ## inline style 一個專門給程式套用樣式的地方 通常都是由程式做運算再添加運算過後的樣式 還有動畫還有動態樣式都是用inline style解決 如果有css動畫包的話可以用程式給css動畫的class用權重蓋過去 關於css有很多動畫的套件 在演示中使用的是[這款](http://cssanimation.io/) ![](https://i.imgur.com/SbMbXrp.png) ### 使用css動畫包方式 第一種外部連結 css5.html ```htmlmixed= <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/cssanimation.min.css" rel="stylesheet"> </head> <body> <div class="cssanimation leKickOutFront"> <span> Example</span> </div> <div class="cssanimation leRainDrop sequence"> Example </div> <script type="text/javascript" src=" https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/letteranimation.min.js"></script> </body> ``` 結果 ![](https://i.imgur.com/EJbMABs.gif) 第二種 直接引入 css5.html 利用網址下載下來 [CSS](https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/cssanimation.min.css) [JS](https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/letteranimation.min.js) ```htmlmixed= <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <link href="https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/cssanimation.min.css" rel="stylesheet"> --> <link rel="stylesheet" href="./cssanimation.min.css"> </head> <body> <div class="cssanimation leKickOutFront"> <span> Example</span> </div> <div class="cssanimation leRainDrop sequence"> Example </div> <!-- <script type="text/javascript" src=" https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/letteranimation.min.js"></script> --> <script src="./letteranimation.min.js"></script> </body> ``` 檔案位子 ![](https://i.imgur.com/pbY8qXL.png) 結果會是一樣的 ![](https://i.imgur.com/EJbMABs.gif) 添加class方式就是用基本的JS程式解決 增加：document.getElementById("id").classList.add("class1", "class2", "class3"); 去除：document.getElementById("id").classList.remove("class0"); ### 從開發模式去看 ![](https://i.imgur.com/kqQT1DC.gif) 會發現他用程式去添加的動畫全都是inline style 結論 綜觀所有的的套件只要是動態/生成的標籤css基本都是用inline style方式 ## !important (最可怕的存在 使用時機 1.趕時間(不用從原理去解) 2.維護古老的網站(古老的網站經手太多人,css程度各有不同,有人會改不動上一家的code,所以會使用大量的important 去壓過去) 3.使用到錯誤的套件(不唬,我他媽真的看過有用important寫的套件) 理論上做動畫唯一選擇都是inline style 為了就是保留趕時間的彈性 可能臨時要刪除一個動畫之類的 這樣就可以用important去把它關掉 只要之後再更正就好 畢竟有直接查important在哪 ### 實戰介紹 css6.html 直接拿上面css5來用 ```htmlmixed= <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./cssanimation.min.css"> </head> <style> div, span { animation: none !important; } </style> <body> <div class="cssanimation leKickOutFront"> <span> Example</span> </div> <div class="cssanimation leRainDrop sequence"> Example </div> <script src="./letteranimation.min.js"></script> </body> ``` ![](https://i.imgur.com/dGIfqSW.gif) 不會動的GIF XDDD 根據css5那邊的開發工具可以知道 在```<div class="cssanimation leRainDrop sequence"> Example </div>``` 這行他會被程式添加一堆的span 裡面寫著一堆inline style 動畫 但是我只用一個標籤就關掉他了 也就是程式做出來了 效能都吃了 但是卻被important強制斷招 ![](https://i.imgur.com/a8PSYqT.png) 看上面程式做的這麼辛苦終於添加上去 結果important讓他的辛苦白費了 不覺得important很可惡嗎? 農夫耕種了好幾個月終於要收成 結果被一個大水沖掉 玩遊戲農了好幾個月終於快做出來一把武器 結果被盜材料 打LOL快贏了 結果斷線輸了會戰 寫一堆程式還沒存檔 結果斷電/當機 太可怕了 而如果遇到舊網頁 使用了大量important怎麼辦? 很簡單 用新的important蓋過去 例 css6.html ```htmlmixed= <style> /* 例一 */ div, span { animation: none !important; } /* 例二 */ .cssanimation { animation-duration: 1s !important; animation-fill-mode: both !important; } .cssanimation span { animation-name: leKickOutBehind !important; transform-origin: top !important; animation-fill-mode: both !important; animation-duration: 1s !important; animation-delay: 100ms !important; animation-iteration-count: infinite !important; } </style> <body> <div class="cssanimation leKickOutFront"> <span> Example</span> </div> <div class="cssanimation leRainDrop sequence"> Example </div> <script src="./letteranimation.min.js"></script> </body> ``` 結果![](https://i.imgur.com/Qbl5mJI.gif) 使用important蓋過去是唯一的方式 # 選擇器 知道了權重 接下來是選擇器 選擇器是擴大權重的方式 這篇文章有介紹大致上有哪些選擇器 [有興趣可以看看](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048) 這篇文章只會介紹我自己很常用到的選擇器 應該說已經可以解9成以上我目前遇到的切版問題 ### 怎麼看選擇器? .class1 .class2{ } class1 = 是class2的父層 class2 = 他是最後一個,所以{}的樣式是給他的 把父層寫進去是為了給class權重 每個都寫父層就會很麻煩 所以才有所謂的scss sass 的套件寫法 用巢狀寫法最後編譯出來css就會幫你添加父層了 如果scss的話沒關西只要知道權重也可以避掉大多的問題 ## 1.空格 空格代表全部 ``` div div ``` 中間空格可以用中文說<font class="red">裡面</font> 所以就是 div 以下全部的div 直觀的意思div以下全部包含的div全都有 到``` div div div div div div ``` 也是同樣的意思 使用方式 實例 css7.html ```htmlmixed= <style> * { color: green; } div { color: yellow; } div div { color: red; } </style> <body> <div>1 <div>2 <span>3 <div>4</div> </span> </div> </div> </body> ``` 結果 ![](https://i.imgur.com/LzFhAZk.png) 因為空格是以下的全部 所以4會吃到3個css `*`號和div還有div div 但是根據權重 div div 的全重最大所以用他的紅色 如果把空格拿掉呢? div.box怎麼解釋? 同樣是div且class為box的標籤 例二 css7.html ```htmlmixed= <style> * { color: green; } div { color: yellow; } div div { color: red; } /* 例二 */ div.box { color: aqua; } </style> <body> <!-- 例二 --> <div>1 <div>2 <span class="box">3 <div>4</div> </span> <div class="box">6 <div>7</div> </div> </div> </div> ``` 看例二那邊 有一個span是class是box 另一個是div class 是box 這樣的化誰會是aqua色 結果6 ![](https://i.imgur.com/qEXEzg7.png) 因為同時是div且class為box只有他 7不是的原因要上去看權重 ## >號 直屬選擇器 跟空白有一點不一樣的東西 他是指下一層的意思 用中文說法就是 div下一層的div 續用css7當例子改 實例 css8.html ```htmlmixed= <style> * { color: green; } div { color: yellow; } div>div { color: red; } </style> <body> <div>1 <div>2 <span>3 <div>4</div> </span> </div> </div> </body> ``` 結果會發現最裡面的div 文字4會不一樣 ![](https://i.imgur.com/yVVigJX.png) 所以他只有吃到`*`和div的color 根據權重 標籤的權重比`*`還高 所以黃色 ## +號 同層選擇器 ```htmlmixed= <!-- div+div只會作用到弟弟--> <div> <div> 哥哥 </div> <div> 弟弟 </div> <!-- 所以他們是同層為兄弟層 --> </div> ``` 範例1 ```htmlmixed= <style> div { color: red; } div+div { color: aqua; } </style> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> ``` 結果 ![](https://i.imgur.com/mLPMzQo.png) 大家都有吃到div 紅色 但是因為+號的css 所以2,3都會吃到div+div的樣式 ## ~號 通用同層選擇器 他跟+號有一點不一樣 +號是只能作用相鄰兄弟 ~號可以跳過兄弟 也就是他不管中間是誰 實例1 css10.html ```htmlmixed= <style> div { color: red; } div~p { color: aqua; } </style> <body> <div> <div>1</div> <div>2</div> <p>3</p> <p>4</p> <span>5</span> <p>6</p> </div> </body> ``` 結果 ![](https://i.imgur.com/ZumYg1b.png) div裡面紅色是因為我有針對div去下css p都是aqua色 因為 裡面有div也有p就不管有沒有遇到其他標籤 如果相反呢? 實例二 css10.html ```htmlmixed= <style> div { color: red; } div~p { color: aqua; } </style> <body> <div> <!-- 例二 --> <p>1</p> <p>2</p> <div>3</div> <div>4</div> <span>5</span> <div>6</div> </div> </body> ``` 結果 ![](https://i.imgur.com/sNHDSF2.png) 全都紅色 因為我有針對div下紅色 然後p和span根據[父層關係](#實戰) 所以全都是紅色 ## ...[屬性] 屬性選擇器 屬性權重=class ```.class1[alt]```會等於.class1.class2 的權重 所以會後蓋前 這個選擇器有兩種做法 第一種 div[屬性] 第二種 div[屬性=???] 屬性指的就是在標籤裡面的任一屬性 通常作用在input特定的type 這個我比較少用但是很常看到套件用 所以還是要說一下怎麼看 實例1 css11.html ```htmlmixed= <style> div[alt] { color: red; } div[alt='2']{ color: aqua; } </style> <body> <div alt="1">1</div> <div alt="2">2</div> <div alt="3">3</div> <div alt="4">4</div> </body> ``` 結果 ![](https://i.imgur.com/pdlLpQg.png) 因為是屬性選擇器 所以根據alt='2'的標準 指定的標籤是2 p.s 屬性不管是誰都可以,不一定要alt ## :nth-child(odd/even/n/an+b/an-b) 偽類選擇器 css3更新推出的 非常強大他做出了原本程式才可以解決的樣式設定 不動用到程式就可以解決動態樣式的選擇器 最直觀的用法就是 有一個table不確定有幾個tr 但是一定要交叉的樣式 從程式面就是要去分開給class 吃效能又麻煩 身為一個懶人 只要是麻煩要多寫幾行沒營養的程式(只要是寫過的程式再寫一次都是沒營養的) 我都會用懶人方式解決 其中一種就是利用這個選擇器 直接 ```htmlmixed= tr:nth-child(2n) { background-color: #ccc; } ``` ![](https://i.imgur.com/HEcO5ny.png) 關於html 都是用下面的table ### 正題開始 此選擇器有4種用法 odd單數 even偶數 n代表的是第幾個 an+b 每a個選b個 an-b 每a個減b個 以我最常用只有n和an+b基本上就可以解決非常多的動態設定 ### :nth-child(odd) 實例一 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例一 */ tr:nth-child(odd) { background-color: #ccc; } </style> <body> <!-- 例一 --> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 選擇到的是tr的單數 ![](https://i.imgur.com/STAkHFD.png) ### :nth-child(odd) 偶數 例二 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例二 */ tr:nth-child(even) { background-color: #ccc; } </style> <body> <!-- 例一/例二 --> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 選擇到的是tr的偶數 ![](https://i.imgur.com/cjtscCl.png) ### :nth-child(n) n是第幾個 例三 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例三 */ tr:nth-child(3) { background-color: #ccc; } </style> <body> <!-- 例一/例二/例三--> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 選到的是第3個tr ![](https://i.imgur.com/PiHiQyp.png) ### :nth-child(an+b) an+b 每a個選第b個 如果單獨寫的是 an呢? 也就是an+0的意思 每a個選第0個 例四 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例四 */ tr:nth-child(2n) { background-color: #ccc; } </style> <body> <!-- 例一/例二/例三/例四--> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 ![](https://i.imgur.com/HEcO5ny.png) 改成2n+0也是一樣的效果可以去試試看 我就不再做一次了 換介紹an+b 例五 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例五 */ tr:nth-child(3n+1) { background-color: #ccc; } </style> <body> <!-- 例一/例二/例三/例四--> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 我寫的是3n+1 中文化就是 每3個選第1個 結果 每3個選第1個 ![](https://i.imgur.com/rUr8yKT.png) ### :nth-child(an-b) 知道了an會是在第幾個 -b也就知道了 3n-1就會是 每3個往回數1個 例六css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例六 */ tr:nth-child(3n-1) { background-color: #ccc; } </style> <body> <!-- 例一/例二/例三/例四--> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 每3個往回數一個 所以在第二個 這個選擇器很少用 因為用+的就可以解決了不會刻意用-的 除非有非常特別的情況(鍵盤+號壞了之類的吧?) ![](https://i.imgur.com/qo0lGo9.png) ## :first-child 選取第一個 nth-child(1) 跟這個一樣 但是快捷鍵輸入法 要特別過去寫1 太累了 所以我就直接選這個first-child 因為都是同個類型所以我都會寫在css12裡面 例七 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例七 */ tr:first-child { background-color: #ccc; } </style> <body> <!-- 例一/例二/例三/例四--> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 完全可以預知未來了 ![](https://i.imgur.com/bEX9MWm.png) ## :last-child 跟上面first-child有點像 決定性不同的事 假設在動態數據上 第一個是一定有的 但是最後一個不知道在哪 所以會用這個讓他去幫我添加樣式 非常常用 例8 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例8 */ tr:last-child { background-color: #ccc; } </style> <body> <!-- 例一/例二/例三/例四/例五/例六/例七/例8---> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 ![](https://i.imgur.com/4WVlfm8.png) ## :not() 直白的意思就是哪個以外 最常和:nth-child(n)一起使用 或者last-child 因為有些樣式有border-bottom 對吧但是設計者最後一個不需要 但是動態資料鬼才知道會有幾個 所以會一起搭配 例9 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例九 */ tr:not(:last-child) { background-color: #ccc; } </style> <body> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 ![](https://i.imgur.com/ebfKyiM.png) 非常好用吧 指定第幾個也可以 例10 css12.html ```htmlmixed= <style> tr, table { width: 400px; text-align: center; } /* 例十 */ tr:not(:nth-child(3)) { background-color: #ccc; } </style> <body> <table border="1"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </body> ``` 結果 ![](https://i.imgur.com/QQAAbUH.png) # 選擇器and權重應用 ### 前言(快捷鍵抄題) 權重懶人包 比誰大哥多>比誰小弟多>比誰雜魚多 基本上都是這個形式 正文 這2個是一起的 如果選擇器多數時,就要會看權重 當想要用權重蓋過去時 那就要會選擇器提升自己的權重 上網隨便抓起道題目來解 在抄題目的時候有用標籤快捷鍵 順便教快捷鍵寫標籤(使用的編輯器為vscode) 快捷鍵的寫法就是利用選擇器的寫法 例如第一題我想做這個 ![](https://i.imgur.com/XCIJTrI.png) 我只要寫上`div#box1.spec1>div#box2.spec2>div#box3.spec3>p{文字}`按下tab就好了 ![](https://i.imgur.com/CvzTwEU.gif) 如果需要大量的div提供測試呢? `div{$}*100`就好 ![](https://i.imgur.com/ktkSEfe.gif) ### 權重第一題 css13.html ```htmlmixed= <style> #box1 .spec2 p { color: red; } div div #box3 p { color: blue; } div.spec1 div.spec2 div.spec3 p { color: green; } </style> <body> <div id="box1" class="spec1"> <div id="box2" class="spec2"> <div id="box3" class="spec3"> <p>文字</p> </div> </div> </div> </body> ``` 這是非常簡單的入門第一題 從選擇器那邊可以知道空格和div.spec1是甚麼 紅色文字 1. id 1分 2. class 1分 3. 標籤 1分 藍色文字 1. id 1分 2. class 0分 3. 標籤 3分 綠色文字 1. id 0分 2. class 3分 3. 標籤 4分 結果很明顯吧? 只有紅色有ID大哥其他都是雜魚 沒有人帶頭的士兵也只是雜魚 答案紅色 ![](https://i.imgur.com/St1RrAI.png) ### 權重第二題 直接上題 css14.html ```htmlmixed= <style> div p { color: red; } #box { color: blue; } </style> <body> <div id="box"> <p id="para" class="spec"><span>文字</span></p> </div> </body> ``` 從span去看發現他沒有任何人控制 所以從父層看 直接看p 喔他是紅色 好答案就是紅色 根據文字是特殊的 所以他一定會被最近的父層控制 ![](https://i.imgur.com/ZGUkaKK.png) ### 權重第三題 css15.html ```htmlmixed= <style> span { color: green; } .nav { color: red; } .nav ul li { color: blue; } </style> <body> <div class="nav"> <ul> <li><span>文字</span></li> <li><span>文字</span></li> <li><span>文字</span></li> <li><span>文字</span></li> <li><span>文字</span></li> </ul> </div> </body> ``` 直接看span就好 恩只有span被單獨設定 所以綠色 ![](https://i.imgur.com/r360ZDb.png) 第四題開始會有點難度 ### 權重第四題 css16.html ```htmlmixed= <style> #box1>div.box1>div>p { color: red; } #box1 div>div#box2.box1>div p { color: green; } #box1>div.box2>div#box2>div p { color: blue; } </style> <body> <div> <div id="box1"> <div class="box2"> <div id="box2" class="box1"> <div> <p>文字</p> </div> </div> </div> </div> </div> </body> ``` 裡面有2個class 2個ID 紅色文字 1. id 1分 2. class 1分 3. 標籤 3分 藍色文字 1. id 2分 2. class 1分 3. 標籤 4分 綠色文字 1. id 2分 2. class 1分 3. 標籤 4分 竟然同分怎麼辦? 同分的時候就是後蓋前 因為css讀取方式是由上至下 計分方式也是當有2個指向到同一個標籤時 就會後蓋前 結果 ![](https://i.imgur.com/yxCXu9T.png) ### 權重第五題 ```htmlmixed= <style> #box1.box4>#box3.box3 div.box1.box3>div p { color: red; } #box1.box4 div>div#box2.box1.box3>div p { color: blue; } #box1>div.box2>div#box2>div p { color: green; } </style> <body> <div> <div id="box1" class="box4"> <div id="box3" class="box2 box3"> <div id="box2" class="box1 box3"> <div> <p>文字</p> </div> </div> </div> </div> </div> </body> ``` 紅色文字 1. id 2分 2. class 4分 3. 標籤 3分 藍色文字 1. id 2分 2. class 3分 3. 標籤 4分 綠色文字 1. id 2分 2. class 1分 3. 標籤 4分 分出來之後 ID數量都一樣所以看class 紅色雖然標籤少一個 但是他class最多 所以答案紅色 ![](https://i.imgur.com/lSB6cAt.png) ### 權重第六題 ```htmlmixed= <style> #box1.box4>div#box3.box3.box2 div.box1 p { color: red; } #box1.box4.box5 div>div#box2.box1.box3>div p { color: blue; } #box1.box5>div.box2.box3>div#box2 p.box5 { color: green; } </style> <body> <div> <div id="box1" class="box4 box5"> <div id="box3" class="box2 box3"> <div id="box2" class="box1 box3"> <div> <p class="box5">文字</p> </div> </div> </div> </div> </div> </body> ``` 紅色文字 1. id 2分 2. class 4分 3. 標籤 3分 藍色文字 1. id 2分 2. class 4分 3. 標籤 4分 綠色文字 1. id 2分 2. class 4分 3. 標籤 3分 藍色文字以些微差距獲勝ya~ ![](https://i.imgur.com/eNp5wHO.png) 5/5完結篇 謝謝各位觀眾