id選擇器與類選擇器 ,css中用.on和#tabs ul li.on效果為什么不同?
<style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? *{margin:0;padding:0;font:12px nomal "Microsoft yahei";} ??
? ? #tabs{margin:20px;}
? ? #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
? ? #tabs ul li{display:inline-block;border:1px solid #aaa;margin:0 3px;height:28px;width:60px;text-align:center;line-height:30px;border-bottom:none;}
? ? #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
? ? </style>
2015-12-07
優(yōu)先級(jí)問(wèn)題。#tabs ul li.on優(yōu)先級(jí)比#tabs ul li高,所以有class為on的這個(gè)li會(huì)是#tabs ul li.on里面的樣式。.on優(yōu)先級(jí)比#tabs ul li低,所以有class為on的這個(gè)li會(huì)是#tabs ul li里面的樣式。
2015-12-07
.on指的是所有的元素只要class是on都用這個(gè)樣式,但是#tabs ul li.on 指的是id為tabs的元素下的li的子元素中class為on的元素