close
打好成為前端工程師的基礎,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。. |
✌推薦閱讀：
前端工程師如何善用ID選擇器? Class和ID的差別是什麼?
靠AI人工智慧撐著的旅社,如今卻開除機器人,旅社下一步該..?
文章標籤
全站熱搜
留言列表
