iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
11
Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列 第 3

CSS class 選取器 - 切版與前端框架最常使用的CSS選取器 - 金魚都能懂了你還怕學不會嗎

在CSS選取器中,class算是比 tag 選取器更加常用到,尤其在現在開發框架盛行的年代更是氾濫。class 選取器的翻成中文的意思就是「分類、類別」,簡單的說如果你想把網頁中的各個區塊或資料或分類,像是「前言、社群、評等、頁首區、頁尾區、主文區...等」,所以在很多的網頁教學中多將版面區塊直接以 CSS class 名稱做代表,例如下方這樣
https://ithelp.ithome.com.tw/upload/images/20190918/20112550x5AH5HjTUn.png

class的規則

CSS class 在 HTML 原始碼中的長相就像下方這樣

<div class="amos">文字內容</div>

但是一個 HTML 的資料有可能同時間會擁有兩種以上的分類,所以也有可能會長成下面這樣

<div class="amos youtuber handsome">文字內容</div>

CSS class 選取器是由一個「.」點作為開頭,後面緊接著則是你想使用的 class 名稱,名稱的開頭有規定的,可使用「中線、底線、Emoji符號」,其他特殊符號一率不可使用,請見 class名稱可用符號測試表,在表中需要特別注意的部分,Amos 簡單條列於下讓各位比較容易記憶:

  • 可以使用中文 (但由於很容易發生伺服器端編碼問題,所以多數開發者嚴格的禁止使用)
  • 可以使用英文
  • 可以使用Emoji符號 (但我想你如果用在工作上,前輩可能會把你踢出去)
  • class名稱第一個文字可以是中線
  • class名稱第一個文字可以是底線
  • class名稱有區分大小寫,大小寫不同則視為不同
  • 除了上述可用的符號外,其他符號都會視為無效的 class 名稱
  • class 名稱第一個字不能是數字(非常重要!!!!!!!!!)

基本上網路上很多教學都有提到 class 名稱不能使用特殊符號,但可能我們會把中線跟底線都當成了特殊符號,這一點就請各位稍微記憶一下就可以了,另外最重要的則是首字絕對不能是數字,這是很多新手都會犯的錯誤,請千萬千萬千萬的要記得阿!
按照上方的規則,我們就能利用這幾個規則組合出工作上面適合的 class 命名了,像是下面這樣

.login-form { ...略 }
.iLikeBuy { ...略 }
.shopping_car { ...略 }
.-this_class--so__ugly { ...略 }
.? {...略}

是不是很多變化讓你看的眼花撩亂呢? 基本上也因為 class 的命名彈性很大,這樣自由的命名方式一旦用在團隊工作上面可能會造成團隊的混亂,且每個人寫的 class 名稱規則不一,導致維護跟理解困難,於是業界又延伸出了另外一套命名方法論出來,至於方法論就不在這篇文章的討論範圍中了,各位喜歡上面哪一種命名方式呢? 歡迎一起留言討論喔。

以上就是 CSS class 選取器的簡單入門,後面 Amos 會繼續介紹更多的選取器以及選取方式,就讓我們繼續看下去吧

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Tag 元素選取器 - 網頁中最常用到的基本設定選取器 - 金魚都能懂了你還怕學不會嗎
下一篇
#ID 選取器 - 程式設計最常用到的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

1 則留言

1
PeterLiao
iT邦新手 5 級 ‧ 2019-09-19 13:05:53

想知道 Amos常用命名習慣的一些皮毛/images/emoticon/emoticon25.gif

CSScoke iT邦新手 4 級 ‧ 2019-09-19 13:09:09 檢舉

有機會來開一場直播聊聊沒問題

PeterLiao iT邦新手 5 級 ‧ 2019-09-19 19:00:02 檢舉

我會記得開啟小鈴鐺!

我要留言

立即登入留言