css权重

权重大小

内嵌权重为1000

	<p style="color: yellow;">ALEX</p>

id选择器的权重为100,类选择器的权重为10,标签选择器的权重为1.

/*1 1 1*/
#box1 .wrap2 p{
	color: red;
}

当权重一样的时候,是以后设置的属性为准,后来者居上。

如果标签元素被选中,谁的权重大,就显示谁的属性

.如果没有被选中标签元素,权重为0。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*此时标签没有被选中,权重为0*/
			.father{
				background: green;
				color: red;
			}
			p{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="father" >
			<div class="child">
				<p>ALEX</p>
			</div>
		</div>
	</body>
</html>

如果权重都是0 。

权重都是0:"就近原则" : 谁描述的近,就显示谁的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">

			/*显示*/
			.child {
				color: gray;
			}
			
			.father{
				background: green;
				color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="father" >
			<div class="child">
				<p>ALEX</p>
			</div>
		</div>
	</body>
</html>
!impantant 权重无限大
.child p{
				color: gray !important;
			}
posted @ 2018-05-28 00:45  Jason_lincoln  阅读(471)  评论(0编辑  收藏  举报