還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!
還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

要成為專業前端工程師前,總是有很多技巧需要學習!這次要分享如何正確使用Class選擇器!

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

Class 選擇器

前端工程師常用的Class 的宣告法,其實是先放一個英文半形句點,再列出選擇器名稱。格式如下:

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

舉例來說,假設我們要定義導覽列的顏色為代號「#0000FF」的顏色時,宣告的 CSS 如下:

.navbar { 
color:#0000FF; 
...
}

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

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

以上宣告顯示如下:

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

一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。語法如下:

【型類選擇器】.【選擇器名稱】 { 
【型類選擇器】.【選擇器名稱】
...
}

舉例來說,若有以下的 CSS 宣告:

b.special {
   color:#0000FF;
}

i.special {
   color:#000000;
}

要將以上的樣式套用在 HTML 內,前端工程師建議用以下的 HTML 碼即可:

這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>

以上宣告顯示如下:

這個例子顯示出同一個選擇器可以有不同的 instance。.

 

 

 

推薦文章:

HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器

 

HTML5教學第二招-出神入化,自己作表格就是不一樣

 

今日網頁設計課程,就是要讓你弄懂HTML與CSS的愛恨糾葛!

 

網路行銷課程教你保守派的黑帽SEO讓你穩定成長

 

阿凡達導演將AI漫畫班上大螢幕!!Python課程是幕後功臣?

 

SEO優化不只揚善,也要利用robots meta隱惡

 

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

發佈留言

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