css 权重
2016-07-15 12:50
597 查看
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
标签的权重为0,0,0,1
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
<html>
<head>
<style type="text/css">
#left{color:black!important;} /*1,1,0,0*/
#container #left{color:red;} /*0,2,0,0*/
#left{color:green!important;} /*1,1,0,0*/
.container #left{color:blue;} /*0,1,1,0*/
</style>
</head>
<body>
<div class="container" id="container">
<span id="left">这到底是什么颜色啊?</span>
</div>
</body>
</html>
从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
标签的权重为0,0,0,1
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
<html>
<head>
<style type="text/css">
#left{color:black!important;} /*1,1,0,0*/
#container #left{color:red;} /*0,2,0,0*/
#left{color:green!important;} /*1,1,0,0*/
.container #left{color:blue;} /*0,1,1,0*/
</style>
</head>
<body>
<div class="container" id="container">
<span id="left">这到底是什么颜色啊?</span>
</div>
</body>
</html>
相关文章推荐
- css自动换行如何设置?url太长会撑开页面
- css3绘制腾讯logo
- sass调试--页面看到sass文件而不是css文件问题
- HTML/CSS 自定义开关按钮控件(switch)样式
- 纯CSS小三角制作
- 7.15 css与js 选择奇偶子元素的区别
- css 旋转
- CSS元素隐藏“失效”以其妙用
- css常用字体
- CSS3 border
- 史上最全的CSS hack方式总结
- HTML-CSS常用样式文本溢出处理效果
- CSS
- 前端学习笔记-css篇
- 细说 CSS margin
- poi生成Excel文件【带样式和格式】
- 提高CSS技术技巧
- css笔记
- 2 纯CSS的菜单
- 两种方法实现用CSS切割图片只取图片中一部分