css調(diào)式技巧:a.class與a .class的區(qū)別,千萬別小看空格

2013/7/5 10:56:34  出處：本站原創(chuàng)   人氣：1730次    字號：小  中  大

在調(diào)式一個css怎么調(diào)都不正確，糾結(jié)了一整天，后來發(fā)現(xiàn)是因為我的一個誤操作，多打了一個空格，一直想抽時間來寫個總結(jié)，現(xiàn)在終于擠出來了，回憶在小錢包項目中遇到各種困難的問題，對a:hover.class與a:hover .class的用法不是很理解，寫法的區(qū)別在于在hover與.class中間是否多一個空格。以前每次我都寧愿多寫個class來避開這種寫法，后來為了使用css sprite技術(shù)的背景圖，花了點時間去研究下，終于了解其中的原理，文章內(nèi)容簡單，高手就當(dāng)做路過，不清楚的同學(xué)請留意下，或許對你有幫助。

第一組

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

使用樣式一：

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

此時鼠標(biāo)經(jīng)過”管理“2字，顏色為黑色

使用樣式二：

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

此時鼠標(biāo)經(jīng)過”管理“2字，顏色為紅色

第二組

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

使用樣式一：

a:hover{color:black}

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

此時鼠標(biāo)經(jīng)過”管理“2字，顏色為紅色

使用樣式二：

a:hover{color:black}

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

此時鼠標(biāo)經(jīng)過”管理“2字，顏色為黑色

對于第一組的a與.ico-manage, .ico-manage屬于span標(biāo)簽的，與a不同級；而對于第二組的a與.ico-manage, .ico-manage屬于a標(biāo)簽的，即是與a同級，由此可得出一個結(jié)論：

1.當(dāng)class為當(dāng)前標(biāo)簽中一個屬性時，則樣式寫為：標(biāo)簽+class名

2.當(dāng)class為子標(biāo)簽的一個屬性時，則樣式寫為：標(biāo)簽+空格+class名