a.class 與 a .class的區別，注意空格 - CSS調試技巧

使用圖片精靈技術進行圖片定位時會出現這個問題，有時候一個空格會導致很多問題,本文執行個體介紹a.class 與 a .class的區別。（CSS視頻教程）

第一組

<a href="#"><span class="ico-manage">管理</span></a>

使用樣式一：

a:hover{color:black}a:hover.ico-manage{color:red;}

此時滑鼠經過”管理“2字，顏色為黑色

使用樣式二：

a:hover{color:black}a:hover .ico-manage{color:red;} //注意空格

此時滑鼠經過”管理“2字，顏色為紅色

第二組

<a href="#" class="ico-manage">管理</a>

使用樣式一：

a:hover{color:black}a:hover.ico-manage{color:red;}

此時滑鼠經過”管理“2字，顏色為紅色

使用樣式二：

a:hover{color:black}a:hover .ico-manage{color:red;} //注意空格

此時滑鼠經過”管理“2字，顏色為黑色

對於第一組的a與.ico-manage, .ico-manage屬於span標籤的，與a不同級；而對於第二組的a與.ico-manage, .ico-manage屬於a標籤的，即是與a同級，由此可得出一個結論：

1.當class為當前標籤中一個屬性時，則樣式寫為：標籤+class名

2.當class為子標籤的一個屬性時，則樣式寫為：標籤+空格+class名