CSS(4)—三大特性(继承性，层叠性，优先级)
- 2019 年 11 月 13 日
- 筆記
CSS(4)—三大特性(继承性，层叠性，优先级)
CSS有三大特性分别是: 继承性，层叠性，优先级。
一、继承性
概念 给父元素设置一些属性，子元素也可以使用，这个我们就称之为继承性。
注意
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 3.继承性中的特殊性 3.1 a标签的文字颜色和下划线是不能继承的 3.2 h标签的文字大小是不能继承的示例
<!-- 样式部分 --> <style type="text/css"> .father { width: 300px; /*设置宽度*/ font-size: 20px; /* 设置字体*/ text-align: right; /* 字体右对齐*/ background-color: green; /*背景颜色绿色*/ color:red; /*字体颜色红色*/ } </style> <!-- html部分 --> <body> <div class="father">father标签 <p>father子标签 p</p> </div> </body>运行结果
从这个例子中可以看出子标签p继承了父类div的样式。
二、层叠性
概念 层叠性就是CSS处理冲突的一种能力。层叠性只有在多个选择器选中 同一个标签, 然后又设置了相同的属性, 才会发生层叠性。
示例
<html> <head> <title>CSS三大特性之层叠性</title> <style> p { color: red; } p { color: blue; } </style> </head> <body> <p style="color: black">我是段落</p> <!-- 最终显示black 就近原则 black > blue > red --> </body> </html>在相同优先级的的情况下 下面的样式元素会将上面的层叠掉。
三、CSS优先级
概念 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定。
优先级
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 补充说明
1、继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。 3、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 4、CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。关于CSS权重，有一套计算公式来去计算，用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
部分权重是可以叠加的。比如的例子：
div ul li ------> 0,0,0,3 a:hover -----—> 0,0,1,1 .son ul li ------> 0,0,1,2 .son a ------> 0,0,1,1 #son p ------> 0,1,0,1注意
对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每一个选择器还是独立的。
示例
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div,p { color: green; /*这里不能是0,0,0,2 而是两个0,0,0,1*/ } p { color: red; /*对于p标签最终会显示红色 0,0,0,1 (因为和上面优先级一样，所以下面会覆盖上面样式)*/ } </style> </head> <body> <p>标签什么颜色</p> </body> </html>四、经典测试题
这里举几个测试题来巩固下css优先级的知识。首先我们要知道如何推断标签的最终样式
1. 先找到影响文字的最里面的盒子 2. 然后计算权重 3. 如果权重一样，看层叠性1、第一题
<!DOCTYPE> <html> <head> <title>第2题</title> <style type="text/css"> #father{ color:red; /* 继承的权重为 0,0,0,0 */ } p{ color:blue; /* 权重 0,0,0,1 */ } </style> </head> <body> <div id="father"> <p>试问这行字体是什么颜色的？</p> </div> </body> </html>答案 蓝色。
2、第二题
<!DOCTYPE> <html> <head> <title>第1题</title> <style type="text/css"> #father #son{ /*权重: 0,2,0,0 */ color:blue; } #father p.c2{ /* 权重: 0,1,1,1 */ color:black; } div.c1 p.c2{ /* 权重 0,0,2,2 */ color:red; } #father{ color:green !important; /* 继承的权重为 0,0,0,0 */ } </style> </head> <body> <div id="father" class="c1"> <p id="son" class="c2"> 试问这行字体是什么颜色的？ </p> </div> </body> </html>答案 蓝色。
3、第三题
<!DOCTYPE> <html> <head> <title>Document</title> <style type="text/css"> div div div div div div div div div div div div{ /* 权重 0,0,0,11 (最后一位数再怎么相加都不会向前进一位) */ color:red; } .me{ color:blue; /* 权重 0,0,1,0 */ } </style> </head> <body> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div class="me">试问这行文字是什么颜色的</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>答案 蓝色。
4、第四题
<!DOCTYPE> <html> <head> <title>第四题</title> <style type="text/css"> .c1 .c2 div{ /* 权重 0,0,2,1 */ color: blue; } div #box3{ /* 权重 0,1,0,1 */ color:green; } #box1 div{ /* 权重 0,1,0,1 */ color:yellow; } </style> </head> <body> <div id="box1" class="c1"> <div id="box2" class="c2"> <div id="box3" class="c3"> 文字显示什么颜色 </div> </div> </div> </body> </html>答案 黄色 （如果权重一样，看层叠性）
你如果愿意有所作为，就必须有始有终。(6)
