課程
/前端開發
/JavaScript
/信息排列效果
定義類“a-img small”，上面寫樣式的時候可以直接.small了嗎？額、。。
2014-12-23
源自：信息排列效果 2-3
正在回答
看看兩者的區別:
一、使用.a-img .small
<html> <head> ??<style?type="text/css"> ??.a-img?.small{ ??????color:#F00; ??????} ??</style> </head> <body> ??<p?class="small">123</p> ??<p?class="a-img"> ?????<a?class="small">hello</a> ??</p> </body> </html>
結果:
123 hello(顏色為紅色）
二、使用.small
<html> <head> ??<style?type="text/css"> ??.small{ ??????color:#F00; ??????} ??</style> </head> <body> ??<p?class="small">123</p> ??<p?class="a-img"> ?????<a?class="small">hello</a> ??</p> </body> </html>
123?(顏色為紅色） hello(顏色為紅色）
三、總結
如是.small引用了small的所有內容都會發生樣式變化
如是.a-img .small說明在引用a-img的標簽下引用small的內容發生樣式變化。
1只特立獨行的蟹 提問者
舉報
大咖教您節約網頁空間的方法，快速學會信息排列效果的制作
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2014-12-24
看看兩者的區別:
一、使用.a-img .small
<html> <head> ??<style?type="text/css"> ??.a-img?.small{ ??????color:#F00; ??????} ??</style> </head> <body> ??<p?class="small">123</p> ??<p?class="a-img"> ?????<a?class="small">hello</a> ??</p> </body> </html>結果:
二、使用.small
<html> <head> ??<style?type="text/css"> ??.small{ ??????color:#F00; ??????} ??</style> </head> <body> ??<p?class="small">123</p> ??<p?class="a-img"> ?????<a?class="small">hello</a> ??</p> </body> </html>結果:
三、總結
如是.small引用了small的所有內容都會發生樣式變化
如是.a-img .small說明在引用a-img的標簽下引用small的內容發生樣式變化。