入門前端工程師知識~得心應手不是夢-透析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 選擇器。


延伸閱讀:

想把網頁用的五顏六色?這篇讓你成為心目中的前端工程師! 

HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道

入門前端工程師知識~得心應手不是夢-透析Class選擇器

網路行銷課程教你從SEO優化方式看品牌價值

如何達到網站SEO優化?Schema標註有解答!

中國IT教育領導品牌 達內教育集團第一家海外授權中心

這個網誌中的熱門文章

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

前端工程師設定CSS背景的五種方法(五)設定背景顏色

前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素