id选择器与类选择器 ,css中用.on和#tabs ul li.on效果为什么不同?

来源:10-1 编程挑战

beiciye

2015-12-07 15:24

<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>


写回答 关注

2回答

  • qq_安伊偌拉_0
    2015-12-07 15:29:34
    已采纳

    优先级问题。#tabs ul li.on优先级比#tabs ul li高,所以有class为on的这个li会是#tabs ul li.on里面的样式。.on优先级比#tabs ul li低,所以有class为on的这个li会是#tabs ul li里面的样式。

    beiciy...

    原来如此,非常感谢!

    2015-12-07 15:33:35

    共 1 条回复 >

  • 一毛钱
    2015-12-07 15:27:17

    .on指的是所有的元素只要class是on都用这个样式,但是#tabs ul li.on 指的是id为tabs的元素下的li的子元素中class为on的元素

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题