小細節:css中的的大小寫區分
前言:
這篇文章看起來可能沒有什麼技術含量，是對一個小細節的驗證。起因是讀《javascript權威指南》這本書時，裡面提到說js是大小寫敏感的語言，而html
不是，因此html中設定屬性時屬性名屬性值不限制大小寫，標籤名也不限制。由此想到，css中的屬性名和屬性值以及選擇器是否限制大小寫呢，今天就是為了驗證一下這個問題。
對HTML不限制大小寫的測試
js大小寫敏感還是比較明顯比較常見的，先用一個小例子來看一下HTML對大小寫不敏感的是什麼樣子的:
來個花樣作死的寫法:
<body>
<Input TYPE="TEXT">
<input 得到的效果和全小寫時一樣:
;
當然，為了規範，我們平時還是要堅持全小寫為妙。
對css是否支援不區分大小寫的測試
直覺上應該是不支援的。。。但我們還是用程式碼來看一下:
首先我們從id下手:
css部分:
#Test {
height:100px;
width:100px;
background:red;
color:#fff;
font-size:33px;
}結構部分:
<div id="test></div> 大小寫不同，我們看到火狐君給我們的效果是:
一片空白，服了，id要區分大小寫.
雖然感覺已經知道結果了，但還是來一發class:
css部分:
.Test {
height:100px;
width:100px;
background:red;
color:#fff;
font-size:33px;
}結構部分:
<div class="test></div>
<div class="Test></div>得到的結果是:
好啦，心服口服,class和id是不能模糊大小寫的，所以更要堅持全小寫啦。
那麼選擇器在書寫的時候，是否完全區分大小寫呢？經測試，id和class選擇器是必然要區分的，而標籤選擇器就比較隨意啦，不區分大小寫,寫”H2”照樣可以選中二號標題標籤^_^
對於屬性值和屬性名,它們也是不區分大小寫滴～～～～比如:
<style>
.test {
Height:100px;
width:100px;
Background:red;
color:#fff;
font-size:33PX;
}
</style>html部分:
<div class="test">哈</div>我們看到這個height，width屬性名和font-size的屬性值都模糊了大小寫。
然而我們仍然可以得到:
於是，我們得出結論：在css中:
- id名和class名是區分大小寫的
- 選擇器中，只有標籤選擇器不區分大小寫
- 屬性名和屬性值是不區分大小寫的
這樣一來,css大小寫敏感的問題就解決啦，但是為了規範，我們平時還是要堅持小寫到底啊～～～哈哈