CSS样式之优先级
2016-05-09 19:53
225 查看
说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分:
1、从CSS代码放置的位置看权重优先级:
内联样式 > 内部嵌入样式 >外联样式
2、从样式选择器的权重优先级:
Important > 内联样式 > ID > 类、伪类、属性选择器 > 标签、伪元素 > 通配符
今儿,我们重点来看看第2点—样式选择器。
请看以下代码:
运行代码,效果图如下:
View Code
运行上述代码,页面显示结果为粉色,而不是绿色!!
1、从CSS代码放置的位置看权重优先级:
内联样式 > 内部嵌入样式 >外联样式
2、从样式选择器的权重优先级:
Important > 内联样式 > ID > 类、伪类、属性选择器 > 标签、伪元素 > 通配符
今儿,我们重点来看看第2点—样式选择器。
请看以下代码:
<!DOCTYPE html> <head> <title>css</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> div.class1 { background:pink; } .class2 { background:green; } </style> </head> <body> <div class="class1 class2" style="width:100px;height:100px;"></div> </body> </html>
运行代码,效果图如下:
<!DOCTYPE html> <head> <title>css</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .class2 { background:green; } .class1 { background:pink; } </style> </head> <body> <div class="class1 class2" style="width:100px;height:100px;"></div> </body> </html>
View Code
运行上述代码,页面显示结果为粉色,而不是绿色!!
相关文章推荐
- CSS——盒子模型
- SVProgressHUD控件使用:功能强大,操作简单
- css实现自适应屏幕高度
- 《Day1 获取不在同一页面的样式属性》
- Html+CSS_居中布局的总结
- 搞不懂下面这个css样式加上:after之后就不起作用了
- div+css
- 解决IE8下CSS3选择器 :nth-child() 不兼容的问题
- Animate.css 基础使用方法
- css link import
- CSS基础
- css盒子模型的示例
- [CSS3] Text ellipsis
- 更换按钮的样式
- ArcGIS教程:更改标题的文本和样式
- IE浏览器和CSS盒模型
- 自定义带图标input样式
- 自定义带图标input样式
- CSS格式化工具-直接可以使用
- CSS的元素分类