三大特性(继承性，层叠性，优先级)
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)
相关文章
暂无评论...
致力于称为最好的程序员导航网站