css继承和层叠
2018-06-24 01:01:39来源:未知 阅读 ()
在前面介绍了如何利用文档结构和css选择器为元素应用各种丰富的样式,今天来好好聊聊css的层叠和继承,先说说概念。
继承:一个元素向其后代元素传递属性值所采用的机制,说的通俗点,就是元素的某些属性可以通过继承从而传递给子元素的。
如:
<p><span>测试继承</span>这里不是span中的内容</p>
p{color:red},这里便会看到p元素和审判元素中的文字都变为红色,因为p元素的属性被span继承过来了。但是有的属性是无法通过继承来传递的,
如border就不会通过继承获得。其实继承很好理解,但要配合层叠来一起理解。
层叠:确定一个元素究竟该用哪些样式时,就需要把继承和声明的特殊性拿来一起考虑,从而该启用哪一个css样式,这个过程就被称为层叠。
上面提到了特殊性,那我们就来重点看看。
先抛出一个问题,下面2对规则,哪条会获胜?
h1{color:red}
body h1{color:blue}
h2{color:red}
h2.color{color:green}
上面的2对规则中,显然只能有一个胜出,然而哪个该胜出嘞?答案就在每个选择器的特殊性。
一个选择器的具体特殊性如下:
1.对于规则中给定的每个ID属性值,特殊性加0,1,0,0
2.对于规则中每个类选择符合属性选择符以及伪类,特殊性加0,0,1,0
3.对于规则中每个元素和伪元素,特殊性0,0,0,1
4.结合符和通配符对特殊性没有任何贡献。
5.内联样式的特殊性加1,0,0,0
6.继承的属性没有特殊性,甚至连0特殊性都没有,所以要低于通配符的。
7.!important总会胜出。
所以对于上面的两组规则就有了结果:
h1{color:red} 0,0,0,1
body h1{color:blue} 0,0,0,2
h2{color:red} 0,0,0,1
h2.color{color:green} 0,0,1,0
所以red和green会生效。
于是,层叠的规则如下:
1.找出你代码里面所有的选择符。
2.规则的显示权重排序和起源排序,标记!important的样式最优先,且有三种起源:制作者,读者,用户代理。
3.元素声明的特殊性排序。
4.元素声明的出现顺序排序。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash