使用圖片精靈技術進行圖片定位時會出現這個問題,有時候一個空格會導致很多問題,本文實例介紹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名稱
#以上是a.class 與 a .class的區別,注意空格 - CSS調試技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!