css代碼重用和覆蓋問題
系統(tǒng)
2842 0
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS覆蓋TEST</title>
<style>
.b{background-color:green; color:#CCCCCC}
.a .b{background-color:blue}
#a {background-color:green;color:#CCCCCC}
#a #b {background-color:blue}
</style>
</head>
<body>
<div class="a">
<div class="b" style="background-color:red">測試1</div>
</div>
<div id="a">
<div id="b" style="background-color:red">測試2</div>
</div>
</body>
</html>
這段測試代碼說明了.b{}影響.a .b{}中的文字顏色，但是沒有影響背景顏色。
.b{綠}，a .b{藍(lán)}和div自己的style(紅)都設(shè)置了背景顏色，但最后只顯示紅；
去掉style(紅)之后編程藍(lán)色；再去掉a .b{藍(lán)}之后才變成綠色。
原因是同樣的CSS會(huì)被覆蓋。瀏覽器使用樣式的順序?yàn)?b{綠}—〉a .b{藍(lán)}—〉style(紅)而后面的樣式把前面的樣式覆蓋掉了。而在class和id下效果是同樣的。
注：樣式最好還是使用class編輯，id具有唯一性，也就是說一張網(wǎng)頁不能有重復(fù)的id。雖然目前瀏覽器也支持重復(fù)id，但這樣會(huì)影響js操作。
css代碼重用和覆蓋問題
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元