來自HTML 4規格:
一個常見的錯誤是使用以數字開頭的ID。
對於HTML 4來說,技術上的答案是:
HTML 5更寬容,只要求id至少包含一個字符,且不能包含任何空格字符。
在XHTML中,id屬性是區分大小寫的。
從純粹實際的角度來看,你可能想要避免使用某些字元。在CSS選擇器中,句點、冒號和井號具有特殊意義,因此你需要在CSS中使用反斜線或在傳遞給jQuery的選擇器字串中使用雙反斜槓來轉義這些字元。在你的樣式表或程式碼中,考慮一下你需要多頻繁地轉義一個字符,然後再決定是否在id中使用句點和冒號。
例如,HTML宣告<div id="first.name"></div>是有效的。你可以在CSS中選擇該元素為#first\.name,在jQuery中選擇為$('#first\\.name')。但是如果你忘記了反斜杠,$('#first.name'),你將得到一個完全有效的選擇器,它尋找id為first並且具有class為name的元素。這是一個容易忽略的錯誤。從長遠來看,你可能更喜歡選擇id為first-name(使用連字號而不是句點)。
<div id="first.name"></div>
#first\.name
$('#first\\.name')
$('#first.name')
first
name
first-name
嚴格遵守命名約定,你可以簡化開發任務。例如,如果你完全限制自己只使用小寫字符,並且總是使用連字符或下劃線來分隔單詞(但不能同時使用連字符和下劃線,選擇其中一個並且永遠不使用另一個),那麼你就有了一個容易記住的模式。你永遠不會懷疑「是firstName還是FirstName?」因為你總是知道你應該輸入first_name。喜歡駝峰命名法?那麼只限制自己使用駝峰命名法,不使用連字符或下劃線,並且始終一致地使用大寫或小寫作為第一個字符,不要混合使用。
firstName
FirstName
first_name
一個現在非常不常見的問題是至少有一個瀏覽器,Netscape 6,錯誤地將id屬性值視為區分大小寫。這意味著如果你在HTML中輸入了id="firstName"(小寫的'f'),並在CSS中輸入了#FirstName { color: red }(大寫的'F'),那個有缺陷的瀏覽器將無法將元素的顏色設為紅色。編輯時(2015年4月),希望你不需要支援Netscape 6。將此視為歷史註釋。
id="firstName"
#FirstName { color: red }
來自HTML 4規格:
一個常見的錯誤是使用以數字開頭的ID。
對於HTML 4來說,技術上的答案是:
HTML 5更寬容,只要求id至少包含一個字符,且不能包含任何空格字符。
在XHTML中,id屬性是區分大小寫的。
從純粹實際的角度來看,你可能想要避免使用某些字元。在CSS選擇器中,句點、冒號和井號具有特殊意義,因此你需要在CSS中使用反斜線或在傳遞給jQuery的選擇器字串中使用雙反斜槓來轉義這些字元。在你的樣式表或程式碼中,考慮一下你需要多頻繁地轉義一個字符,然後再決定是否在id中使用句點和冒號。
例如,HTML宣告
<div id="first.name"></div>
是有效的。你可以在CSS中選擇該元素為#first\.name
,在jQuery中選擇為$('#first\\.name')
。但是如果你忘記了反斜杠,$('#first.name')
,你將得到一個完全有效的選擇器,它尋找id為first
並且具有class為name
的元素。這是一個容易忽略的錯誤。從長遠來看,你可能更喜歡選擇id為first-name
(使用連字號而不是句點)。嚴格遵守命名約定,你可以簡化開發任務。例如,如果你完全限制自己只使用小寫字符,並且總是使用連字符或下劃線來分隔單詞(但不能同時使用連字符和下劃線,選擇其中一個並且永遠不使用另一個),那麼你就有了一個容易記住的模式。你永遠不會懷疑「是
firstName
還是FirstName
?」因為你總是知道你應該輸入first_name
。喜歡駝峰命名法?那麼只限制自己使用駝峰命名法,不使用連字符或下劃線,並且始終一致地使用大寫或小寫作為第一個字符,不要混合使用。一個現在非常不常見的問題是至少有一個瀏覽器,Netscape 6,錯誤地將id屬性值視為區分大小寫。這意味著如果你在HTML中輸入了
id="firstName"
(小寫的'f'),並在CSS中輸入了#FirstName { color: red }
(大寫的'F'),那個有缺陷的瀏覽器將無法將元素的顏色設為紅色。編輯時(2015年4月),希望你不需要支援Netscape 6。將此視為歷史註釋。