css中選擇符的命名規(guī)定

這篇文章主要介紹“css中選擇符的命名規(guī)定”，在日常操作中，相信很多人在css中選擇符的命名規(guī)定問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css中選擇符的命名規(guī)定”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

原來(lái)命名可以這樣的

前一段時(shí)間，在某一站點(diǎn)看到了這樣的內(nèi)容：

"這也可以？"是我對(duì)此的第一印象。不過(guò)，稍作調(diào)查知道了，這樣寫(xiě)確實(shí)是有效的。此外，這個(gè)?_?的符號(hào)表情，看起來(lái)是不是相當(dāng)有存在感？再看看搭配的css屬性，display: none !important;即定義元素一定不顯示，是不是也非常符合這個(gè)表情想要表達(dá)的意思？

只要遵循css語(yǔ)法，就可以很好地應(yīng)用這種不常見(jiàn)的命名。
命名字符的規(guī)定

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

另外，你應(yīng)該也知道，選擇符命名的開(kāi)頭字符，不可以是數(shù)字，例如.3-column不是合法的選擇符。使用不合法的選擇符的后果是，對(duì)應(yīng)的css樣式規(guī)則會(huì)因?yàn)檫x擇符無(wú)法正確解析，而變?yōu)闊o(wú)效。

事實(shí)上，css語(yǔ)法對(duì)于命名字符有更多的規(guī)定。以下是W3C關(guān)于命名標(biāo)識(shí)符的說(shuō)明中的內(nèi)容：

    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.

意思是說(shuō)，css中允許使用的命名字符，包括大小寫(xiě)英文字母、數(shù)字、連字符-、下劃線_及其他ISO 10646字符集（等同于Unicode）中的字符。同時(shí)，起始字符部分不能是數(shù)字，或連續(xù)2個(gè)-，或1個(gè)-后接1個(gè)數(shù)字。此外，允許使用轉(zhuǎn)義字符和任意ISO 10646字符的數(shù)字代碼。

經(jīng)過(guò)測(cè)試，IE6對(duì)起始字符是下劃線_和單個(gè)連字符-的情況，也會(huì)認(rèn)定樣式規(guī)則無(wú)效。
字符轉(zhuǎn)義

可以看出，命名允許使用的字符其實(shí)是非常多的。但是，有一個(gè)地方需要注意，就是特殊字符。特殊字符是指在css語(yǔ)法中，被認(rèn)定用來(lái)表示特定含義的字符（相當(dāng)于編程語(yǔ)言中的關(guān)鍵字）。例如，...這樣的class命名是不合法的，因?yàn)?是css選擇符中表示class的字符，因此不允許直接用在命名中（...這位沉默著的class名你感覺(jué)如何？）。

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

這個(gè)時(shí)候，想要在命名中也加入這些特殊字符，就要使用字符轉(zhuǎn)義（character escape）。字符轉(zhuǎn)義通過(guò)反斜杠\實(shí)現(xiàn)，在css選擇符中，你可以通過(guò)在特殊字符前加\的方法，取消特殊字符的特定含義，使其可以正確地被用于命名。例如，特殊字符#就可以用\#來(lái)表示。

反斜杠\的作用還不只如此。前面說(shuō)到，任意ISO 10646字符都可以使用。按照ISO 10646的定義，所有的字符都可以用十六進(jìn)制的代碼來(lái)表示（尤其是一些不易直接輸入的字符需要這樣表示）。css語(yǔ)法中，以反斜杠\開(kāi)頭，后接最多6位十六進(jìn)制數(shù)字，即構(gòu)成一個(gè)ISO 10646字符的代碼。這和直接輸入ISO 10646字符是一樣的，但由于形式上是代碼，因此是最可靠的。

取消特殊字符的特定含義，除了前邊的直接在前邊加\的寫(xiě)法外，還可以用ISO 10646代碼。比如#也可以用\23或者\(yùn)000023表示。請(qǐng)注意，如果代碼不滿6位（前面幾位是0），一定要在末尾留一個(gè)空格，這才能組成一個(gè)正確的ISO 10646代碼（這個(gè)空格是分隔標(biāo)識(shí)用，算作代碼的一部分，不會(huì)引發(fā)選擇符中的特殊含義）。如果不想有這個(gè)空格，請(qǐng)使用完整的6位十六進(jìn)制代碼。

比如，下面是一個(gè)合法的命名示例。html：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

css中的定義：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .\5E _\5E {width:50px;height:50px;background:tomato;}  

這里的^屬于特殊字符，但通過(guò)代碼寫(xiě)法后，就可以正確解析了。

關(guān)于css字符轉(zhuǎn)義的更多介紹，推薦你閱讀CSS character escape sequences，這位作者還給了一個(gè)很有用的轉(zhuǎn)義工具。
讓命名更有趣

還需要提示一下的是，ISO 10646包含的字符，有很多即使看起來(lái)很奇特，但由于不是特殊字符，是可以直接輸入的。盡管可能因?yàn)榫庉嬈髯煮w原因無(wú)法顯示，但仍然有效。比如，html：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div class="?">music on~</div>  

對(duì)應(yīng)css：

CSS Code復(fù)制內(nèi)容到剪貼板

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

對(duì)應(yīng)的實(shí)際元素是（對(duì)的，我要證明這個(gè)寫(xiě)法有效?。?br/>music on~

如果你想表示關(guān)于音樂(lè)內(nèi)容的區(qū)域，這樣字符圖形也許可以說(shuō)比英文單詞更加符合語(yǔ)義。而更重要的是，這種寫(xiě)法更有趣！

在使用這些字符的時(shí)候，請(qǐng)注意，css和html的編碼都應(yīng)使用utf-8。如果html是服務(wù)器端語(yǔ)言（比如php）生成的，則編碼選項(xiàng)應(yīng)設(shè)置為utf-8。

關(guān)于如何找到各種字符，歡迎到Unicode查詢站點(diǎn)Unicode character table。

看到這里，你是否已經(jīng)想開(kāi)始寫(xiě)點(diǎn)不一樣的選擇符命名呢？我已經(jīng)試過(guò)一些&darr;

html：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div class="(?&rho;?*)"></div>  

2. <div class="(?&omega;?)"></div>  

css：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .\(?&omega;?\){width:50px;height:50px;background:skyblue;}   

2. .\(?&rho;?\*\){width:50px;height:50px;background:aquamarine;}  

以后覺(jué)得詞不達(dá)意的時(shí)候，就用這種吧，一定可以給某個(gè)看你代碼的人一個(gè)驚喜。
結(jié)語(yǔ)

實(shí)際地了解css語(yǔ)法對(duì)于命名標(biāo)識(shí)符的規(guī)定后才知道，命名時(shí)原來(lái)還有如此多的空間可以發(fā)揮。一起試試更多的有趣的選擇符吧！

到此，關(guān)于“css中選擇符的命名規(guī)定”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！