属性的继承以及样式优先级
2015-09-25 17:26
495 查看
并非所有的属性都能继承的,只有一部分具有继承
样式层叠
一个元素具有多个样式时,首先根据优先级判断选取,若同样权重则后写的样式将覆盖之前的样式。若每个样式表中都具有独有的样式,那么个样式表中独有的样式会层叠使用。
如上图所示
提升选择器优先级
!important
继承属性
子元素自动继承具有继承属性: color font text-align text-indent list-style ...
非继承属性
非继承属性 background border position ...
CSS样式优先级
对一个元素使用多个样式时,采用哪个个样式可以遵循I-C-E权重方法确定。样式层叠
一个元素具有多个样式时,首先根据优先级判断选取,若同样权重则后写的样式将覆盖之前的样式。若每个样式表中都具有独有的样式,那么个样式表中独有的样式会层叠使用。
如上图所示
已知以下HTML: <div> <p class="special">CSS Selectors</p> </div> 应用了以下CSS: p{color: blue;} p:first-child{ color: green; } p.special{color: red;} 请问“CSS Selectors”的文字颜色为red(填写颜色的英文名称即可)
CSS改变优先级
改变先后顺序提升选择器优先级
!important
1.改变先后顺序 <p class="tip special">改变位置</p> //优先级一致的样式,将显示为red色 //.tip==[class~="tip"] .tip{ color:blue; } .special{ color:red; } //改变顺序位置,将变为blue .special{ color:red; } .tip{ color:blue }
2.!important <p class="tip special"> !important </p> .tip{ color:blue !important; } p.special{ color:red; }
相关文章推荐
- 自定义样式及带数字ProgressBar
- cms修改栏目单页样式错位调整
- css各种姿势的水平居中
- :nth-child(n)与:nth-of-type(n)的区别
- css3的样式讲解-css学习之旅(3)
- css3的样式讲解-css学习之旅(3)
- css3的样式讲解-css学习之旅(3)
- css3的样式讲解-css学习之旅(3)
- 常用css3技巧
- CSS十问——好奇心+刨根问底=CSSer
- 【转载】CSS 的优先级机制[总结]
- CSS 背景
- css 样式大全
- H5移动前端开发常用高能css3汇总
- Css3学习之路,画公司的Logo
- css初始化
- Ubuntu设置消息提醒的样式
- 使用Chrome Audits功能清理无用的css
- CSS标签属性大全
- 固比固布局 css3