首頁 > web前端 > css教學 > a.class 與 a .class的區別,注意空格 - CSS調試技巧

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

PHPz
發布: 2017-04-23 11:28:29
原創
2726 人瀏覽過

使用圖片精靈技術進行圖片定位時會出現這個問題,有時候一個空格會導致很多問題,本文實例介紹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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板