WEB_0217

最新推荐文章于 2021-02-03 03:24:27 发布

monuo5659

最新推荐文章于 2021-02-03 03:24:27 发布

阅读量109

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/monuo5659/article/details/104361077

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

1、CSS的三大特性

1、CSS层叠性

2、CSS继承性

3、CSS优先级

目标：1、能说出CSS冲突所采取的原则 2、能说出哪些常见的样式能够继承。

应用：1、能写出CSS优先级代码。 3、能会计算常见的选择器和叠加值。

1.1层叠性

div
{
    color:red;
}
div
{
    color:pink;
}


<div>
    长江后浪推前浪，前浪死在沙滩上。
</div>

实现color：pink；所以被称为层叠样式。（就近原则）

1.2 继承性

例如：

div
{
    color:red;
}

<div>
    <p>what color in this paragraph?</p>
</div>

此时<p></p>标签里面是什么颜色？答案：红色！

这就是继承性。子标签会继承父标签的颜色！

可以继承的样式有(font-、text-、line这些元素！以及color)

1.3优先级（重点）

1.3.1权重计算公式

（1）、选择器相同，则是层叠样式。

（2）、选择器不同则出现优先级问题。

样式	权重
*	0，0，0，0
class(类选择器)	0，0，1，0
ID(ID选择器)	0，1，0，0
行内样式	1，0，0，0
！important	无穷大∞

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*
			{
				color:red;
			}
			.nav 
			{
				color:green!important;
			}
			#one
			{
				color:blue;
			}
			
		</style>
	</head>
	<body>
		<div class="nav" id="one" style=" color:yellow;">
			什么颜色？
		</div>
	</body>
</html>

结果是绿色，为什么？

1.3.2权重叠加

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<style>
		/*这就是权重叠加*/
		/*0010+0001=0011*/
		.nav a
		{
			color:red;
		}
		/*我想让百度变为蓝色,下面这样写为什么不变色？*/
		.bd 
		{
			color:blue;
		}
		/*reason：就是.bd的权重为0010*/
		/*下面的skyblue的权重为0010+0010=0020，所以一定变为skyblue颜色*/
		.nav .bd
		{
			color:skyblue;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="nav">
		<a href="#" class="bd">百度</a>
		<a href="#">腾讯</a>
		<a href="#">新浪</a>
		<a href="#">网易</a>
		<a href="#">谷歌</a>
	</div>
</body>
</html>

NOTES：权重叠加没有进制的。也就是说0005+0005=0，0，0，10；没有进制！

NOTES：继承的权重为0

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<style>
		div
		{
			color:red;
		}
		div p
		{
			color:blue;
		}
		.demo 
		{
			color:green;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="demo">
		<p>
			我是什么颜色？
		</p>
	</div>
</body>
</html>

上面的例子中可以说明，继承的权重为0，最后颜色为蓝色。如果类选择器没有具体选择儿子，继承的权重仍为0；

monuo5659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB_0217

1、CSS的三大特性1、CSS层叠性2、CSS继承性3、CSS优先级目标：1、能说出CSS冲突所采取的原则 2、能说出哪些常见的样式能够继承。应用：1、能写出CSS优先级代码。 3、能会计算常见的选择器和叠加值。1.1层叠性div{ color:red;}div{ color:pink;}<div...
复制链接

扫一扫