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>