css 最高层级(浅谈CSS 权值 层叠 重要性!important)
css 最高层级
浅谈CSS 权值 层叠 重要性!important1、特殊性 权值
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:
- p{color:red;}
- .first{color:green;}
- <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
- p{color:red;} /*权值为1*/
- p span{color:green;} /*权值为1+1=2*/
- .warning{color:white;} /*权值为10*/
- p span.warning{color:purple;} /*权值为1+1+10=12*/
- #footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
2、层叠
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
如下面代码:
- p{color:red;}
- p{color:green;}
- <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了:
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
3、重要性
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
如下代码:
- p{color:red!important;}
- p{color:green;}
- <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意:!important要写在分号的前面
这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
以上这篇浅谈CSS 权值 层叠 重要性(!important)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持开心学习网。
- css垂直居中图解(全面总结使用CSS实现水平垂直居中效果的方法)
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- css3中的过渡属性的几种方法(基于CSS3实现的几个小loading效果)
- 三种css选择符(浅谈css之属性及剩余的选择符)
- css布局详细介绍(浅谈CSS 栅格系统布局原理分析)
- css3带阴影弹出窗口(CSS3解决移动页面上点击链接触发色块的问题)
- CSS中background-attachment
- css透明输入框(纯CSS实现气泡对话框尖角处理方案)
- css文本怎么控制边距(css中text-overflow属性与文本截断详解)
- css样式基础知识(CSS深入教程之文字修饰的那点事)
- csstable元素设置(CSS设置table下tbody的滚动条的实现)
- css 最高层级(浅谈CSS 权值 层叠 重要性!important)
- css中的float的使用
- css position详解(深究CSS定位position的常用技法)
- css之float布局(css float属性_动力节点Java学院整理)
- css响应式网格布局(CSS网格布局的示例代码)
- 保温好 容量大 颜值高 保温杯你给娃娃买对了吗(保温好容量大颜值高)
- 《道德经》 人生避开骄狂,才能免去祸患(道德经人生避开骄狂)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
- 每日一典 过江之鲫(每日一典过江之鲫)
热门推荐
- dedecms文章详情表(让Dedecms自带搜索实现全文检索支持标题与内容)
- mysql集群是用什么搭建的(MySQL5.7 集群配置的步骤)
- python微信红包分配(PHP切割整数工具类似微信红包金额分配的思路详解)
- mysql索引的比较规则(MySQL的Flush-List和脏页的落盘机制)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- dedecms栏目页更改(dedecms系统列表页调用tag标签同时带上链接)
- laravel队列使用场景(Laravel使用RabbitMQ的方法示例)
- laravel5.1获取数据(laravel5表单唯一验证的实例代码)
- mysql实验总结分析(MySQL查询截取的深入分析)
- canvas 绘图解决方案(高清屏下canvas重置尺寸引发的问题的解决)