css選擇器命名規則:差異及可能產生的問題

2024-07-11 09:02:30

字體：大中小

來源：轉載

供稿：網友

武林網(www.49028c.com)文章簡介：W3C CSS2.1的 4.1.3 節中提到：標識符（包括選擇器中的元素名，類和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符編碼U+00A1及以上，再加連字號（-）和下劃線（_）；它們不能以數字，或一個連字號后跟數字為開頭。它們還可以包含轉義字符加任何ISO 10646字符作為一個數

操作系統版本：Windows 7

瀏覽器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev

受影響的瀏覽器：所有瀏覽器.

經常講到css選擇器命名規則，其實不只是在團隊合作基礎上來講這個，每個瀏覽器,IE產品，火狐，蘋果，谷歌，都會因為命名不規范會產生不同樣式..

一、關于選擇器的命名

W3C CSS2.1的 4.1.3 節中提到：標識符（包括選擇器中的元素名，類和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符編碼U+00A1及以上，再加連字號（-）和下劃線（_）；它們不能以數字，或一個連字號后跟數字為開頭。它們還可以包含轉義字符加任何ISO 10646字符作為一個數字編碼。

由于設計到的字符很多，本文只針對字符[a-zA-Z0-9]，再加連字號（-）和下劃線（_）進行討論。關于CSS中允許使用的字符和大小寫信息，請參考W3C CSS2.1的4.1.3節

二、差異及可能產生的問題

在W3C CSS2.1說明文檔中，只提到選擇器標識符不能以數字，或一個連字號后跟數字為開頭。除此之外，沒有相關的說明。那么各瀏覽器下的表現是否遵循這一規則呢？

請觀察如下代碼：

2324252627282930313233343536373839404142divheightfont-line-background- .1.123456.2demo.2-demo .2_demo .-2demo ._demo ._2demo .-.---.——._-.-

1234567891011121314151617181920>字母開頭>單個數字>多個數字>數字開頭 + [a-z][A-Z]>數字 + "-" 開頭>數字 + "_" 開頭>連字符(-)開頭 + [a-z][A-Z]>連字符(-) + 數字開頭>下劃線(_)開頭 + [a-z][A-Z]>下劃線(_) + 數字開頭>單個連字符(-)>多個連字符(-)>單個下劃線(_)>多個下劃線(_)>下劃線(_) + 連字符(-)>連字符(-) + 下劃線(_)>多個下劃線(_) + 連字符(-)>多個連字符(-) + 下劃線(_)>多個連字符(-) + 數字>多個下劃線(_) + 數字</div>

看看各瀏覽器下面的結果

觀察上表，分析各瀏覽器下的表現，總結如下

從上面看到，我們可以直觀的了解到選擇器的命名在各瀏覽器下的支持情況有所不同。因此，如果選擇器的命名不規范，將影響各瀏覽器下，樣式渲染不一致。比如如下代碼：

12divbackground-widthheightline- .20fontsizebackground-

1>以數字開頭的類名</div>

以數字開始的類名僅在IE6(Q)/IE7(Q)/IE8(Q)下被識別，而其它瀏覽器下則不識別（忽略該規則）

三、如何避免受此問題影響

堅持以字母開頭命名選擇器，這樣可保證在所有瀏覽器下都能兼容。

四、關于團隊合作的css命名規范

常用的css命名規則

頭：header

內容：content/container