css选择器优先级
2016-02-22 21:40
513 查看
在css中的选择器主要分为三种:标签名选择器、类选择器和ID选择器。而从这三种选择器又可以延伸出群组选择器和后代选择器。
1.标签名选择器:如 p { } 其实就直接是html标签。通常我们以优先级1来表示优先级(优先级的数字越高优先级越高)。
2.类选择器:如 .box{ } 类选择器是在前端使用的最多的选择器了。通常我们以10来表示其优先级。
3.ID选择器:如 #box { } 由于id是在页面上唯一的名字,所以其复用性较差,但是其指向最精确,通常我们以100来表示其优先级。
4.群组选择器:p, .box, div { } 即由一组相同css样式组成的选择器,是css的一种简化的写法。
5.后代选择器:div p .box { } 是使用多个选择器加上中间的空格来找到具体的要控制标签。还有一种更加精确的写法为 div>p>.box { }。
而其优先级就是它所包含的标签的优先级数字相加,例如:div p .div {} 优先级为:1+1+10=12。
特别注意 :1.在使用选择器的时候尽量使用少的层次关系(最好层次不要超过3层)。
2.如果有重叠的css样式就尽量使用群组选择器,这样可以使代码更简洁。
3.!important优先级最高。*
选择器最低。
4.相同选择器在层叠时,后加载的覆盖前加载的。
5.设置的样式高于继承的样式。
1.标签名选择器:如 p { } 其实就直接是html标签。通常我们以优先级1来表示优先级(优先级的数字越高优先级越高)。
2.类选择器:如 .box{ } 类选择器是在前端使用的最多的选择器了。通常我们以10来表示其优先级。
3.ID选择器:如 #box { } 由于id是在页面上唯一的名字,所以其复用性较差,但是其指向最精确,通常我们以100来表示其优先级。
4.群组选择器:p, .box, div { } 即由一组相同css样式组成的选择器,是css的一种简化的写法。
5.后代选择器:div p .box { } 是使用多个选择器加上中间的空格来找到具体的要控制标签。还有一种更加精确的写法为 div>p>.box { }。
而其优先级就是它所包含的标签的优先级数字相加,例如:div p .div {} 优先级为:1+1+10=12。
特别注意 :1.在使用选择器的时候尽量使用少的层次关系(最好层次不要超过3层)。
2.如果有重叠的css样式就尽量使用群组选择器,这样可以使代码更简洁。
3.!important优先级最高。*
选择器最低。
4.相同选择器在层叠时,后加载的覆盖前加载的。
5.设置的样式高于继承的样式。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- [css] line-height 百分比单位和数值单位的区别
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- jQuery+css实现的切换图片功能代码