解析css中的選擇符命名

 　　原來命名可以這樣的

　　前一段時間，在某一網站看到了這樣的內容：

　　"這也可以?"是我對此的第一印象。不過，稍作調查知道了，這樣寫確實是有效。此外，這個?_?的符號表情，看起來是不是相當有存在感?再看看搭配的css屬性，display: none !important;即定義元素一定不顯示，是不是也非常符合這個表情想要表達的意思?

　　只要遵循css文法，就可以很好地應用這種不常見的命名。

　　命名字元的規定

　　英文單詞的組合你一定很熟悉，例如.top_nav用來表示頂部導航，不僅用了合法的選擇符，而且也很符合語義化的要求。

　　另外，你應該也知道，選擇符命名的開頭字元，不可以是數字，例如.3-column不是合法的選擇符。使用不合法的選擇符的後果是，對應的css樣式規則會因為選擇符無法正確解析，而變為無效。

　　事實上，css文法對於命名字元有更多的規定。以下是W3C關於命名標識符的說明中的內容：

　　In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.

　　意思是說，css中允許使用的命名字元，包括大小寫英文字母、數字、連字號-、底線_及其他ISO 10646字元集(等同於Unicode)中的字元。同時，起始字元部分不能是數字，或連續2個-，或1個-後接1個數字。此外，允許使用逸出字元和任意ISO 10646字元的數字代碼。

　　經過測試，IE6對起始字元是底線_和單個連字號-的情況，也會認定樣式規則無效。

　　字元轉義

　　可以看出，命名允許使用的字元其實是非常多的。但是，有一個地方需要注意，就是特殊字元。特殊字元是指在css文法中，被認定用來表示特定含義的字元(相當於程式設計語言中的關鍵字)。例如，...這樣的class命名是不合法的，因為.是css選擇符中表示class的字元，因此不允許直接用在命名中(...這位沉默著的class名你感覺如何?)。

　　css中的特殊字元包含：!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, , ], ^,`, {, |, }, 和~。

　　這個時候，想要在命名中也加入這些特殊字元，就要使用字元轉義(character escape)。字元轉義通過反斜線實現，在css選擇符中，你可以通過在特殊字元前加的方法，取消特殊字元的特定含義，使其可以正確地被用於命名。例如，特殊字元#就可以用#來表示。

　　反斜線的作用還不只如此。前面說到，任意ISO 10646字元都可以使用。按照ISO 10646的定義，所有的字元都可以用十六進位的代碼來表示(尤其是一些不易直接輸入的字元需要這樣表示)。css文法中，以反斜線開頭，後接最多6位十六進位數字，即構成一個ISO 10646字元的代碼。這和直接輸入ISO 10646字元是一樣的，但由於形式上是代碼，因此是最可靠的。

　　取消特殊字元的特定含義，除了前邊的直接在前邊加的寫法外，還可以用ISO 10646代碼。比如#也可以用23或者00023表示。請注意，如果代碼不滿6位(前面幾位是0)，一定要在末尾留一個空格，這才能組成一個正確的ISO 10646代碼(這個空格是分隔標識用，算作代碼的一部分，不會引發選擇符中的特殊含義)。如果不想有這個空格，請使用完整的6位十六進位代碼。

　　比如，下面是一個合法的命名樣本。html：

　XML/HTML Code複製內容到剪貼簿

1. <div class="^_^"></div>

 

 

　　css中的定義：

　　CSS Code複製內容到剪貼簿

　　.5E _5E {width:50px;height:50px;background:tomato;}

　　這裡的^屬於特殊字元，但通過代碼寫法後，就可以正確解析了。

　　關於css字元轉義的更多介紹，推薦你閱讀CSS character escape sequences，這位作者還給了一個很有用的轉義工具。

　　讓命名更有趣

　　還需要提示一下的是，ISO 10646包含的字元，有很多即使看起來很奇特，但由於不是特殊字元，是可以直接輸入的。儘管可能因為編輯器字型原因無法顯示，但仍然有效。比如，html：

　　XML/HTML Code複製內容到剪貼簿

　　

music on~

 

　　對應css：

　　CSS Code複製內容到剪貼簿

　　.?{width:50px;height:50px;background:mistyrose;color:#333;}

　　對應的實際元素是(對的，我要證明這個寫法有效!)：

　　music on~

　　如果你想表示關於音樂內容的地區，這樣字元圖形也許可以說比英文單詞更加符合語義。而更重要的是，這種寫法更有趣!

　　在使用這些字元的時候，請注意，css和html的編碼都應使用utf-8。如果html是伺服器端語言(比如php)產生的，則編碼選項應設定為utf-8。

　　關於如何找到各種字元，歡迎到Unicode查詢網站Unicode character table。

　　看到這裡，你是否已經想開始寫點不一樣的選擇符命名呢?我已經試過一些↓

　　html：

　　XML/HTML Code複製內容到剪貼簿

1. <div class="(?ρ?*)"></div>
2. <div class="(?ω?)"></div>

 

 

　　css：

　　CSS Code複製內容到剪貼簿

　　.(?ω?){width:50px;height:50px;background:skyblue;}

　　.(?ρ?*){width:50px;height:50px;background:aquamarine;}

　　以後覺得詞不達意的時候，就用這種吧，一定可以給某個看你代碼的人一個驚喜。

　　結語

　　實際地瞭解css文法對於命名標識符的規定後才知道，命名時原來還有如此多的空間可以發揮。一起試試更多的有趣的選擇符吧!