权重大小
内嵌权重为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;
}