本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
CSS 的 ID 選取器對於網頁開發來說，占了不小的份量與歷練，每個新手在接觸網頁時應該要畢恭畢敬的叫他一聲前輩才對，這話怎麼說呢? 容我後面再解釋。
先來看看 ID 選取器在 HTML 中的長相
<div ID="amos">文字內容</div>
CSS ID選取器在網頁中負責的角色跟職務大都是跟程式搭配一起應用，但為何會說他是 CSS 選取器呢? 主要是因為不管是程式還是 CSS 都可以用到這個 ID 來做『選取該物件』的目的，如果你想要利用 CSS 選取到這個 HTML 物件的話，你可以利用一個 # 號作為開頭，並且在#號後面接著你要給他的名稱即可，就像下方這樣
#amos{ color: red; }
CSS ID 選取器在網頁中有個特性就是同個ID名稱在同一個頁面當中只能出現一次，這有點像是身分證字號一樣，擁有不重複性(那個知道身分證會有重複的朋友懂就好，請別來戰，謝謝您)，也就是說 ID 名稱在這個頁面中可以當作是唯一識別字，這有甚麼好處呢? 這表示你要選取到頁面中的某一個特定項目，可以不需要在茫茫物件中找尋，直接喊他名字就可以了阿，你想看看你有很多女朋友都叫做阿美，萬一都認不出來喊錯怎麼辦? 如果他們都有一個獨特的名稱就不會喊錯啦(醒醒吧!你沒有女朋友!)
當然有些朋友會說那我用 class 選取器不就好了? 這樣說是沒錯啦，但 ID 選取器跟 CSS class 選取器雖然很像，他不同的地方在於 ID 選取器的不可重複特性，所以我們不會在一個物件上面放兩個不同的 ID 名稱，像是下面這樣
<div id="amos handsome">文字內容</div>
上面這樣寫是沒有意義且錯誤的，不會有 amos 同時還 handsome 同時存在 ID (我難過T_T)，畢竟有一個名稱就可以找到我們要的對象了，何須第二個呢?
此外對於 ID 名稱可運用的符號，多數都會說不可使用特殊符號，這部份各位可以看一下 Amos 測試的 CSS ID 名稱可用符號測試表 ，如果你懶得看，那 Amos 也幫你整理好了條列的方式比較好閱讀:
ID 名稱不可重複(非常重要!!!!!!!!!)不可同時有兩個 ID 名稱(非常重要!!!!!!!!!)看起來是不是有些似曾相似? 對! 我就是複製昨天的文章把 class 選取器的測試拿來改一下就能發現到了，其實 ID 選取器的名稱規則跟 class 一樣，這樣應該就比較容易學習了吧。
雖然我們說到一個頁面中不可以同時有兩個相同 ID 名稱的區塊出現，但是啊~瀏覽器對於 ID 的處理其實還是有差別的，當你使用CSS選取ID的時候，你會看到同一個頁面中的兩個相同ID名稱的區塊(好繞舌)，同時都會有效果(點此看範例)，但是如果是程式的話(如 JavaScript )則會出現與預期不同的問題。所以很多沒有寫程式的CSS新手都會覺得前輩你唬爛我! 但實際上CSS根本不管你程式怎麼運作啊，我只管畫面上有的東西我都給他話出來就好啦，所以別再怪前輩唬爛你了，稍微思考一下應該也就覺得這狀況其實滿合理的。
其實目前前端開發用到 ID 的機會已經越來越少了，大多的開發都可以改用 class 就可以搞定了，且彈性也比較大，之前說道為何要叫 ID選取器一聲前輩也是如此，其實他應用的情境很多，早期的開發為了避免切版人員跟程式人員在ID名稱上面的命名衝突，所以切版人員大多可能被告知不要使用ID選取器，盡量使用 class 比較好，但現在前端程式開發已大量改用 class 的情況下，好像問題又回來了(累)。
此外我們還需要了解的是 ID 選取器的優先權算是目前介紹的『 Tag 、 class 』 CSS 選取器中優先權最高的了，也因為如此，未來要修改覆寫的時候可能會發生不好覆寫的情況或是覆寫的原始碼變髒的狀況，所以多數有經驗的開發者應該都不建議使用 ID 選取器才是。
曾經在國外有開發者大力提倡使用 ID 選取器，原因無他，就是因為他不可重複的特性，所以他效能比較好! (咦)，這說法是哪來的呢? 我們可以從瀏覽器對程式的處理來思考，程式在抓取 ID 名稱的物件時，由於 ID 的不可重複性，所以當瀏覽器已經抓到了該 ID 物件之後，就可停止尋找網頁中物件的這個流程了，所以也就是說在瀏覽器中程式對ID的處置就是找到就結束該工作流程，但是前面 Amos 有說到，瀏覽器在對 CSS 的處理上面跟程式不同，所以我們發現縱使你設定了兩個相同 ID 名稱的物件在你的網頁中，瀏覽器依舊可以正常的對兩個物件做畫面的處理，也就是說瀏覽器找到頁面中第一個 ID 物件之後，他不會停止尋找，而是直到整份 HTML 文件都看過一次確認沒有之後，才會結束這個尋找的工作流程，所以這個『CSS 使用 ID 選取器效能會比較好』的說法應該是無法成立才對(若有錯誤歡迎網友指正)。
基本上這個問題要問施主自己了，因為每間公司的開發狀況跟需求都有所不同，團隊成員的開發習慣跟開發方式也都不同，所以當然不可能就是一個可以或不可以可以回答的，反倒是建議開發者可以放開心胸不要去追求二分法的答案，而是必須搞懂每個選取器的特性跟使用在不同狀況中的優缺點，這樣得到的答案才是最佳解，畢竟最正的那個女朋友不見得是最適合你的女朋友，最適合你的女朋友也不見得是最正的那個女朋友(再次打醒!你沒有女朋友! ) 金魚都能懂的 CSS 選取器我們明天見
Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
<div id="amos">文字內容</div>
<div ID="amos">文字內容</div>
<DIV id="amos">文字內容</DIV>
<DIV ID="amos">文字內容</DIV>
請問Amos，HTML中標籤和屬性的大小寫有差嗎？
我測試起來是都可以順利運行，好像沒差，請問這個會建議怎麼理解和輔助直覺記憶嗎？
iThome鐵人賽
看影片追技術