【原】a.class與a .class的區別


4月份一直忙,一直想抽時間來寫博文,現在終於擠出來了,回憶在小錢包項目中遇到各種困難的問題,對a:hover.class與a:hover .class的用法不是很理解,寫法的區別在於在hover與.class中間是否多一個空格。以前每次我都寧願多寫個class來避開這種寫法,后來為了使用css sprite技術的背景圖,花了點時間去研究下,終於了解其中的原理,文章內容簡單,高手就當做路過,不清楚的同學請留意下,或許對你有幫助。

看下面的2組結構和樣式...

第一組

<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名

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。