css代碼重用和覆蓋問題
系統
2495 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{藍}和div自己的style(紅)都設置了背景顏色，但最后只顯示紅；
去掉style(紅)之后編程藍色；再去掉a .b{藍}之后才變成綠色。
原因是同樣的CSS會被覆蓋。瀏覽器使用樣式的順序為.b{綠}—〉a .b{藍}—〉style(紅)而后面的樣式把前面的樣式覆蓋掉了。而在class和id下效果是同樣的。
注：樣式最好還是使用class編輯，id具有唯一性，也就是說一張網頁不能有重復的id。雖然目前瀏覽器也支持重復id，但這樣會影響js操作。
css代碼重用和覆蓋問題
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元