码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习(6)层叠

时间:2019-09-21 19:34:54      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:属性   法则   优先   内联   范围   ali   red   over   方式   

1.声明冲突

不同的样式,多次应用到同一元素

层叠:解决声明冲突的过程,浏览器自动处理(权重计算)

有时候需要修改样式的时候,可以使用优先级高的方式覆盖,而不是在源代码修改

①比较重要性

(1)作者样式表中的 !important 样式 用法:color:red !important; 拥有最高优先级,慎用。

(2)作者样式表中的普通样式

(3)浏览器默认样式

②比较特殊性(看选择器)

总体规则:选择器选中的范围越窄,优先级越高(如p.a比a优先级高)

具体规则:通过选择器,计算一个四位数(逢256进1),数越大,优先级越高

千位:内联样式,记做1,其他记做0

百位:id选择器的数量,没有记做0

十位:类选择器,属性选择器,伪类选择器的数量

个位:元素选择器,伪元素选择器的数量

③比较源次序

代码书写靠后的优先级高

 

应用

1.重置样式表

书写一些作者样式,覆盖浏览器的默认样式

就像是一种默认的标准格式的样式,通用的,先把浏览器的样式覆盖掉,后面具体的样式再写一个详细的样式表

常见的重置样式表:normalize.css、reset.css、meyer.css

2.爱恨法则(越写在后面的优先级越高)

link > visited > hover > active

a:link{color:black;}    正常

a:visited{color:gray;} 访问过的

a:hover{color:red;}     鼠标在上面时

a:active{color:chocolate;} 鼠标按下时

CSS学习(6)层叠

标签:属性   法则   优先   内联   范围   ali   red   over   方式   

原文地址:https://www.cnblogs.com/1016391912pm/p/11563911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!