样式的继承性和优先级 #33
Description
CSS继承性
关于继承属性，可以分成：
- 字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
- 文本系列属性
text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
- 元素可见性
visibility
猜猜<p>中的字体都是什么颜色
<style type="text/css">
div {
color: #F00; /* 红色 */
}
</style>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
</body>
运行结果如下：
上方代码中，我们给<div>增加字体红色属性，却发现，<div>里的每一个子标签也增加了红色属性。于是我们得到这样的结论：
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
关于文字样式的属性，都具有继承性。这些属性包括：
color、text-开头的、line-开头的、font-开头的。关于盒子、定位、布局的属性，都不能继承。
层叠性（计算权值）
下面我们通过一些例子来说明什么是层叠性
<style type="text/css">
p {
color:#C30; /* 红色 */
}
.p1 {
color:#0FF; /* 青色 */
}
.p1 {
color:#F6C; /* 粉色 */
}
</style>
<body>
<p class="p1" id="p2">猜猜我是什么颜色吧！</p>
</body>
上图中，p2样式不存在，所以id添加的样式无效可忽略，文字最终显示的是粉色，这个时候，就出现了层叠性的情况。
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：id的数量，类的数量，标签的数量。
因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器，给出以下规则：
- 继承的样式没有优先级
- 通配符优先级0，0，0
- 元素选择器优先级0，0，1
- 类和伪类优先级0，1，0
- id选择器优先级1，0，0
- 内联样式优先级1，0，0，0
- !important优先级正无穷
注意
!important的权重虽然为正无穷，但也是可以计算的，比如正无穷+1或者*2就比正无穷大，原因是计算机中的正无穷是有界的，不是数学上无界的概念。
1000,100,10,1不是十进制中的1000,100,10,1，而是进制数，不是2进制，不是10进制，而是256进制，就是0到255后+1才是1，比如通配符的权重为0，伪元素的权重为1，中间相差了255，依次类推。
针对上面规则，我们接下来举一些复杂一点的例子
计算权值
<style type="text/css">
#hz1 .box2 p { /* 我的权值是100+10+1 */
color:#0F9; /* 青色 */
}
#hz1 #hz2 .box3 p { /* 我的权值是100+100+10+1 */
color:#FF3; /* 黄色 */
}
div.box1 div.box2 div.box3 p { /* 我的权值是1+10+1+10+1+10+1 */
color:#3F3; /* 绿色 */
}
</style>
<body>
<div class="box1" id="hz1">
<div class="box2" id="hz2">
<div class="box3" id="hz3">
<p>猜猜我是什么颜色吧！</p>
</div>
</div>
</div>
</body>
权值相同时
<style type="text/css">
.box1 p { /* 我的权值是10+1 */
color:#F99; /* 粉红色 */
}
.box2 p { /* 我的权值是10+1 */
color:#6F6; /* 绿色 */
}
</style>
<body>
<div class="box1" id="hz1">
<div class="box2" id="hz2">
<div class="box3" id="hz3">
<p>猜猜我是什么颜色吧！</p>
</div>
</div>
</div>
</body>
从下图可以看到，第一个样式和第二个样式的权值相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（class='box2'就近原则）。
要想实现下列效果应怎么设计css
实现代码如下：
<style type="text/css">
.nav ul li {
color:#09C; /* 蓝色 */
}
.nav ul .bk {
color:#F00; /* 红色 */
}
</style>
<body>
<div class="nav">
<ul>
<li class="bk">博客</li>
<li>博客</li>
<li>博客</li>
<li>博客</li>
<li>博客</li>
<li>博客</li>
</ul>
</div>
</body>
若没有选择元素呢？
<style type="text/css">
#hz3 { /* 没有选中p */
color:#F03;/* 红色 */
}
#hz1 #hz2 { /* 没有选中p */
color:#0F6;/* 蓝色 */
}
</style>
<body>
<div class="box" id="hz1">
<div class="box" id="hz2">
<div class="box" id="hz3">
<p>猜猜我是什么颜色</p>
</div>
</div>
</div>
</body>
通过下图显示的结果可以看出如果没有选中元素的话就依据就近原则，id='hz3'离<p>标签最近
总结
加强训练
第一题
<style type="text/css">
.sp2 {
color:#C00; /* 红色 */
}
.sp1 {
color:#06F; /* 蓝色 */
}
</style>
<body>
<p class="sp1 sp2">我是什么颜色</p>
<p class="sp2 sp1">我是什么颜色</p>
</body>
第二题
<style type="text/css">
.sp1 {
color:#06F; /* 蓝色 */
}
.sp2 {
color:#C00; /* 红色 */
}
</style>
<body>
<p class="sp1 sp2">我是什么颜色</p>
<p class="sp2 sp1">我是什么颜色</p>
</body>
第三题
<style type="text/css">
div div {
color:#C00; /* 红色 */
}
div {
color:#09F; /* 蓝色 */
}
</style>
<body>
<div>
<div>
<div>
我是什么颜色
</div>
</div>
</div>
</body>
第四题
<style type="text/css">
#hz1 div {
color:#C00; /* 红色 */
}
#hz3 {
color:#09F; /* 蓝色 */
}
</style>
<body>
<div class="box1" id="hz1">
<div class="box2" id="hz2">
<div class="box3" id="hz3">
我是什么颜色
</div>
</div>
</div>
</body>
答案
第一题是蓝色，第二题是红色，第三题是红色，第四题是红色