CSS的三大特性
2018-06-24 02:23:26来源:未知 阅读 ()
本文内容:
- 层叠性
- 继承性
- 优先级
- 权重计算方法(特异性)
首发日期:2018-05-01
层叠性:
- 层叠性是指当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性。
- 比如:先给div设置背景颜色为红色,然后设置背景颜色为粉红色,那么最终颜色可能为红色,也可能为粉红色(明显的两种颜色设置不能并立,所以只为其一,这里没给出确定答案是因为还要考虑“优先级”)
层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性,不会覆盖不重复的属性,不重复的属性会合并下来(包括那些允许设置多个值的属性也会合并,比如text-shadow)。】
示例:
依据层叠性的就近原则,第一个div的背景色为蓝色,第二个div的背景色为绿色。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ background-color: red; } div{ background-color: blue; } </style> </head> <body> <div>123</div> <!-- 最终背景颜色是蓝色 --> <div style="background-color: green;">123</div> <!-- 最终背景颜色是绿色 --> </body> </html>
继承性:
- 继承性是指当子标签没有设置样式时,会继承父标签的样式。
- 比如一个子标签没有设置背景颜色,那么子标签会继承父标签的背景颜色。
可继承的属性比如有字体类属性(字体颜色、字体大小之类的)、文本类属性(行高之类的)、背景类属性(背景颜色之类的)(要注意子标签不会继承父标签的宽度、高度、边距属性。)
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ font-size:70px; background-color: #CCC; color:skyblue; } </style> </head> <body> <div> <p>p继承div的样式</p> </div> </body> </html>
优先级:
- 优先级:!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 【优先级高的规则会忽视层叠性,忽视就近原则来定义样式。比如定义了!important,即使行内样式离得近,最终生效的还是!important标注的属性】
- !important是css的一种语法,定义在样式属性后面,代表这个属性不会被覆盖,最终生效的属性一定是!important标注的属性。
示例:
下面的代码可以从上到下,依次注释选择器来测试优先级。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> /* 从上到下,依次注释选择器来测试优先级 */ div{ color:green!important; } #id1{ color:red; } .class{ color: blue; } div{ color:purple; } </style> </head> <body> <div>!import优先级</div> <div style="color:red">行内样式优先级</div> <div id="id1">id选择器优先级</div> <div class="c1">类选择器优先级</div> <div>标签选择器优先级</div> </body> </html>
上面的规则!important和行内样式毫无疑问,但如果多个选择器混杂来定义样式的时候如何判断他们的优先级?答案是依据权重来判断。
权重计算方法【可以称为是css的特异性】:
- 几个规则:
- 权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】
- 继承的权重为(0,0,0,0)
- 标签选择器的权重为(0,0,0,1)
- 类、伪类选择器的权重为(0,0,1,0)
- id选择器选择器的权重为(0,1,0,0)
- 行内样式的权重为(1,0,0,0)
- !important的权重无限大
- 计算方法:
- 多个选择器混杂时,权重之和也是用四个数字来组成,每一位的值为多个选择器四个数字的每位之和,比如div:first-child的权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1),比如div ul li 为(0,0,0,3),比如a:hover为(0,0,1,1)
- 权重之和的数制是不会进位的,再多的标签选择器权重加和也抵不过一个类选择器。
- 多个选择器之间的顺序是无关的,不影响权重之和。
- 注意:对于并集选择器来说不是权重的加和,因为理论上它还是独立的,它只相当于将多个选择器的相同内容归于一个并集选择器中,理论上每一个选择器还是独立的。
示例:
权重相同时,考虑就近原则:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div .p1{ background-color:blue; } p.p1{ background-color:green; } </style> </head> <body> <div> <p class="p1">123</p> <!-- 最终颜色为绿色 --> </div> </body> </html>
权重不同时,权重大的生效:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> p.p1:first-child{ background-color:green; } div .p1{ background-color:blue; } </style> </head> <body> <div> <p class="p1">123</p> <!-- 最终颜色为绿色 --> </div> </body> </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系: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