css佈局命名時如何盡量避免底線

這篇文章帶給大家的內容是關於css佈局命名時盡量避免下劃線，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

用過css hack的朋友應該知道，用底線命名也是​​一種hack，如使用「_style」這樣的命名，可以讓ie外的大部分瀏覽器忽略這個樣式的定義，所以使用「_」做為命名時的分隔符號是不規範的。在做css檢查時會出現錯誤提示，因此要避免使用底線命名。

為此得找一個能代替底線而又合規範的符號，當然不是一定要用這種分隔符號之類的，只是個人習慣問題。

做了個小測試，將底線分別用了「~」、「$」、「`」、「&」和「－」去代替，結果只有「－」號碼是可以使用的，而且對js的支援也正常，看下測試：

以下為引用的內容：

css部分：

程式碼如下：

.try-a{ color:#00f; }
.try~a{ color:#00f; }
.try`a{ color:#00f; }
.try&a{ color:#00f; }
.try$a{ color:#00f; }
.try-b{ color:#f00; }
.try~b{ color:#f00; }
.try`b{ color:#f00; }
.try&b{ color:#f00; }
.try$b{ color:#f00; }

html部分：

程式碼如下：

<div id="a" class="try-a">try1</div>
<div id="b" class="try~a">try2</div>
<div id="c" class="try`a">try3</div>
<div id="d" class="try&a">try4</div>
<div id="e" class="try$a">try5</div></p> <p><input type="button" value="ok" onclick="b（）；" />

js部分：

程式碼如下：

function b（）{
document.getelementbyid（"a"）。classname="try-b";
document.getelementbyid（"b"）。classname="try~b";
document.getelementbyid（"c"）。classname="try`b";
document.getelementbyid（"d"）。classname="try&b";
document.getelementbyid（"e"）。classname="try$b";
}

結果是「try1」變成了紅色，顯示正常。不過在css定義裡，常常會用到id選擇符，如果在頁面中的id命名中使用了“_”，就免不了在css樣式裡出現下劃線“_”了，所以在此還得注意在id的命名上也要避免使用底線。

以上就是對css佈局命名時盡量避免下劃線的全部介紹，如果您想了解更多有關CSS3教程，請關注PHP中文網。

以上是css佈局命名時如何盡量避免底線的詳細內容。更多資訊請關注PHP中文網其他相關文章！