css的层叠性
2,194 阅读
<style type="text/css" media="screen">
/*css的层叠性：就是css处理冲突的能力*/
p{
color: red;
}
.pp{
color: green;
}
#para1{
color: blue;
}
/*当选择器选择上某个元素的时候 需要这么统计权重：
id的数量，类的数量，标签的数量。*/
/*层叠性的特点：
①不进位（实际上可以进位 255:1 然而一般无意义）;*/
div div div div p{
color: red;
}
.yanse{
color: blue;
} /*虽然标签选择器数量很多但是还是比不上一个类选择器*/
/*并集选择器（分组选择器）要拆开计算 不能合着算*/
/* ②如果权重一样（id，类，标签数量一样）
谁写在后面听谁的*/
#box1 .hezi2 p{
color: red;
}
#box2 div .pp{
color: blue;
}/*应为这个写在后面所以颜色是蓝色*/
/*如果不是直接选择到的属性 通过继承来的属性权重为0*/
#box{
color: red；
}
.pp2{
color: blue；
}/*虽然上面的id标签等级比类标签高 然而显示的颜色还是蓝色*/
/*开始数权重之前一定要先看一看选择器最内侧标签是否选中目标*/
/*如果属性都是继承来的 权重都是0 那么谁近听谁的*/
</style>
</head>
<body>
<p class="pp" id="para1">颜色</p>
<div>
<div>
<div>
<div>
<p class="yanse">颜色</p>
</div>
</div>
</div>
</div>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p class="pp">颜色</p>
</div>
</div>
</div>
<div id="box">
<p class="pp2">颜色</p>
</div>
</body>
css权重总结：
① 先看有没有选中 如果选中了 那么以（id数，类数，标签数）来计权重 谁大听谁
② 如果没有选中，那么权重是0 此时只以就近原则选择属性
所有权重问题 没有兼容性问题
