廣告後台系統切版與 CSS 優先級實作

前端切版挑戰第二彈

過去工作中很常會接觸到廣告後台，所以對這次的挑戰很有興趣！也希望未來可以自己打造一個很符合行銷人需求的廣告後台，而這次主要是接手助教的版型，再去做額外的功能處理。

成品網站Demo：https://cdpn.io/tinahung126/debug/bGqYPaj/ZorBaLwjppOM

這次的功能需求主要有兩個大約花了近三小時研究和完成這項任務：

1. 固定表格版頭：若表格列數過多時，即使滾動表格仍然可以讓表頭固定置頂，讓使用者可以很清楚知道自己所看的欄位代表什麼資料。
2. 勾選欄位時樣式改變：讓使用者勾選該欄位時，可以讓整列都有橘色背景的醒目提示，讓使用者知道他們勾選了哪些欄位。

我其中會來分享在「勾選欄位樣式」中遇到的困難，主要就是 CSS 選擇器的優先級問題。

先來前情提要一下，選擇器分成三個等級：

• 等級一： ID 選擇器，如#article。
• 等級二：Class 選擇器，另外包括屬性選擇器、偽類選擇器，如 .checked 、[type="radio"]、:hover 等。
• 等級三： Element 選擇器，包括偽元素選擇器，例如 div、::before。

這邊推薦兩個幫忙計算 CSS 優先級的神器：

• Polypane ：可以幫你計算你目前選擇器優先級分數，可以依照這個數字大小去比較你的優先級（要注意的是他每個位數是不會進位的，例如你選了 11 個class，中間綠色的數字會顯示 11 而不會進位到藍色的數字）

幫你計算 CSS 優先級的網站：Polypane

• Specificity Calculator：也是計算優先級神器，但更好的是他可以直接幫你排順序，如下圖，一樣可以輸入你要比較的兩個 CSS 選擇器，之後再按右上角的 sort by specificity 按鈕，他就會幫你排列好了，是不是超方便！

幫你計算優先級再幫你排列的網站：Specificity Calculator

接下來進入正題來說明一下目前遇到的問題，我希望的表格底色能有這三種

1. 沒有動作時，要灰白交錯：使用 .table__row:nth-child(even)就能達到此效果。
2. 當滑鼠滑過時，要有Hover 深灰背景色：（在深色背景時其實也有變化，只是不夠明顯），用 .table__row:hover達到此效果。
3. 被勾選時要呈現橘色：用監聽器達成，若前方 checkBox被點選了，則在 table__row 再加上checked class name，因此在另外設定.check 的 CSS 效果即可

這時候會發生一件事情，為什麼被勾選的欄位還會有 hover 灰色效果！！！

• 需求1和2的層級是一樣的，這時候重要性是依寫的順序排序，因此我hover寫在比較後面，所以他會比較優先 → 這點倒是沒問題，本來的需求也是hover 比較重要於交錯底色
• 比較嚴重的是被勾選的欄位會被hover影響，因為他的優先級最低，只有10分，而另外兩項都有20分

雖然看起來是蠻簡單的問題，而且是蠻好揪錯的問題，因為底色沒變橘色就是很明顯的錯誤，但對於剛學習 CSS 的我真的是丟了一個震撼彈，原來真的有這層影響，因此就開始著手更改優先級。

要讓他們同層級嗎？還是要比他們層級高？

如果同層級：就要確保另外兩項都要寫在checked屬性的上方，不然效果還是會被覆蓋上去，這時候就在想，那我就硬要比他們高層級就好啦，因為不論如何，我都希望被勾選的層級是最大，不要受到其他人影響，就是要站在最高點，所以我希望他的層級分數可以是 30 ！

修改完後如下圖，我直接在 .checked 上面再綁了兩層的 class name 選擇器<確保他層級最高。

最後成果當然就是成功啦，雖然看起來很簡單，但還是花了快一小時來解決這個問題，雖然這樣設定不確定是否會過於冗長，之後若有更好的解法會，若有任何想法也歡迎交流哦！