為什麼ID選擇器對前端工程師如此重要?原因是…

為什麼ID選擇器對前端工程師如此重要?原因是...
為什麼ID選擇器對前端工程師如此重要?原因是…

為什麼身為前端工程師都要清楚怎麼用ID選擇器?看完此篇你就懂了!

這篇中提到:Class 及 ID 都是使用者設定的選擇器 (selector)。Class 選擇器的說明如這篇,ID 選擇器的說明如下

ID 選擇器

Class 的宣告法,是先放一個井字號 (#),之後再列出選擇器名稱。格式如下:

ID 名稱{ 
屬性:設定值;
...
}

舉例來說,如果要根據前端工程師的看法來要定義導覽列的顏色為代號「#0000FF」的顏色時,宣告的 CSS 如下:

#navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內的話,我們必須要用以下的 HTML 碼:

<p class="navbar">這是用 id 選擇器定義 navbar 文字顏色為「#0000FF」純藍色的例子。</p>

以上宣告顯示如下:

▶ 參考資料:HTML和CSS的網頁顏色代碼對照表

Class 跟 ID 的不同之處

這兩者之間最大的不同,在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。

另外,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

至於何時要用 ID 、何時要用 Class,並沒有絕對的規則。但是大多的時候,Class 選擇器的使用頻率較高,因為 Class 選擇器在一個 HTML 文件中,可以被使用多次。但是當你要用 Javascript 的 GetElementByID 函數時,你就應該要用 ID 選擇器。

Class 名稱及 ID 名稱,大寫與小寫是不同的,不能互用。例如:.navbar 及 .NavBar,是代表兩個不同的 Class 選擇器。

原來前端工程師要會的不只是CSS碼,還要懂得Class和ID名稱的用法,要當好前端工程師果然沒那麼簡單啊!

 

 

 

推薦文章:

如何成為前端工程師?首先你要先具備…

 

HTML5教學法寶1-文字排版設定好,人人愛看少不了!

 

HTML5教學法寶2-區塊外框設定一把罩!

 

美國NASDAQ上市公司、外商IT教育培訓企業

 

擠進高薪科技大門-Java課程等你來瞭解!

 

黑白帽怎麼跟SEO的網路行銷課程有關係,難道是在討論SEO的衣櫥嗎?

 

煮咖啡也能跟AI結合?只要有Python課程,這些都能實現!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *