CSS样式的继承性和优先级

本文主要内容

CSS的继承性
CSS的层叠性
计算权值
权值问题大总结
CSS样式表的冲突的总结
权值问题深入
同一个标签，携带了多个类名

1.CSS继承性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
div
{
<!--猜猜字体都是什么颜色-->
	color:#F00;<!--红色-->
	}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
</body>
</html>

效果图如下

上方代码中，我们给div标签增加字体红色属性，却发现，div里的每一个子标签

也增加了红色属性。于是我们得到这样的结论：

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

继承性是从自己开始，直到最小的元素。

**<!--看一下下面的代码和上面的区别，此段代码加了一个border属性-->**
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
div
{
	color:#F00;
	border:10px #33CCCC solid;<!--设备外边框的大小为10px 颜色为橙色 线型为实线-->
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
</body>
</html>

效果图如下

上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

关于盒子、定位、布局的属性，都不能继承。

以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。

2.层叠性（计算权值）
下面我就会通过一些实际的例子说明什么是层叠性
例1.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">                                                                                      
p{
	color:#C30;<!--红色-->
}
.p1{
	color:#0FF;<!--青色-->
}
.p1{
	color:#F6C;<!--粉色-->
}
</style>
</head>
<body>
<p class="p1" id="p2">猜猜我是什么颜色吧！</p>
</body>
</html>

注意观察查看查看器右边的元素
效果图
上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是粉色，这个时候，就出现了层叠性的情况。
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
id的数量，类的数量，标签的数量
因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
给出以下规则

内联样式优先级1000
id选择器优先级100
类和伪类优先级10
元素选择器优先级1
通配符优先级0
继承的样式没有优先级
针对上面规则，我们接下来举一些复杂一点的例子:are you ready?go
1.计算权值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
#hz1 .box2 p<!--我的权值是1000+100+1-->
{
	color:#0F9;<!--青色-->
}
#hz1 #hz2 .box3 p<!--我的权值是1000+1000+100+1-->
{
	color:#FF3;<!--黄色-->
}
div.box1 div.box2 div.box3 p<!--我的权值是1+100+1+100+1+100+1-->
	color:#3F3;<!--绿色-->
}
</style>
</head>
<body>
<div class="box1" id="hz1">
<div class="box2" id="hz2">
<div class="box3" id="hz3">
<p>猜猜我是什么颜色吧！</p>
</div>
</div>
</div>
</body>
</html>
<!--综合上面的比较得出最终字体为黄色-->效果图如下

一定要注意查看器右边！！！自己看
效果图
2.权值相同时呢？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
.box1 p<!--我的权值是100+1-->
{
	color:#F99;<!--粉红色-->
}
.box2 p<!--我的权值是100+1-->
{
	color:#6F6;<!--绿色-->
}
</style>
</head>
<body>
<div class="box1" id="hz1">
<div class="box2" id="hz2">
<div class="box3" id="hz3">
<p>猜猜我是什么颜色吧！</p>
</div>
</div>
</div>
</body>
</html>
从下图可以看到，第一个样式和第二个样式的权值相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。

效果图
3.要想实现下列效果应怎么设计css

具有实战意义哟，如果是让第二个变成红色呢，请自己思考完成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
.nav ul li
{
	color:#09C;<!--蓝色-->
}
.nav ul .bk
{
	color:#F00;<!--红色-->
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="bk">博客</li>
<li>博客</li>
<li>博客</li>
<li>博客</li>
<li>博客</li>
<li>博客</li>
</ul>
</body>
</html>

4.若没有选择元素呢？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
#hz3<!--没有选中p-->
{
	color:#F03;<!--红色-->
}
#hz1 #hz2<!--没有选中p-->
{
	color:#0F6;<!--蓝色-->
}
</style>
</head>
<body>
<div class="box" id="hz1">
<div class="box" id="hz2">
<div class="box" id="hz3">
<p>猜猜我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
通过下图显示的结果可以看出如果没有选中元素的话就依据就近原则

效果图
5.总结如下
总结图

6.下面做几个例题加强一下，先自己思考结果
1.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
.sp2
{
	color:#C00;<!--红色-->
}
.sp1
{
	color:#06F;<!--蓝色-->
}
</style>
</head>
<body>
<p class="sp1 sp2">我是什么颜色</p>
<p class="sp2 sp1">我是什么颜色</p>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
div div
{
	color:#C00;<!--红色-->
}
div
{
	color:#09F;<!--蓝色-->
}
</style>
</head>
<body>
<div>
<div>
<div>
我是什么颜色
</div>
</div>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承性练习</title>
<style type="text/css">
#hz1 div
{
	color:#C00;<!--红色-->
}
#hz3
{
	color:#09F;<!--蓝色-->
}
</style>
</head>
<body>
<div class="box1" id="hz1">
<div class="box2" id="hz2">
<div class="box3" id="hz3">
我是什么颜色
</div>
</div>
</div>
</body>
</html>

第一题是蓝色，第二题是红色，第三题是红色

CSS样式的继承性和优先级

猜你喜欢