本文主要是介绍CSS学习笔记4：CSS层叠性、继承性以及权重计算，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在实际使用CSS选择器时，会遇到各种各样的情况，比如给一个父亲标签添加的样式会不会遗传给后代？比如如果用不同的方式给同样的内容添加样式，会听谁的？了解了CSS继承性、层叠性以及选择器的权重计算，你就会知其然并且知其所以然啦！
一、CSS继承性、层叠性
在使用CSS选择器的时候要注意CSS的两个属性：继承性和层叠性。
1） 继承性。有一些属性给祖先元素，所有的后代元素都集成上了。关于文字样式的（color、font-、text-、line-），都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。
2） 层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css是通过什么机制处理冲突呢？答案是：权重。
二、CSS选择器权重的计算方法
权重优先级：id选择器>类选择器>标签选择器。
所以，先看有没id选择器，有id选择器的权重最大；如果都有id选择器，id选择器数量最多的权重最大，如果id选择器都一样，在比较类选择器。同理，依次类推。
情况1：三个不同权重的选择器同时作用在一个标签上
示例：
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/*1个id选择器，1个类选择器，1个标签选择器，权重记做：1,1,1*/#box1 .hezi2 p{color:red;}/*1个id选择器，0个类选择器，3个标签选择器，权重记做：1,0,3*/div div #box3 p{color:green;}/*0个id选择器，3个类选择器，4个标签选择器，权重记做：0,3,4*/div.hezi1 div.hezi2 div.hezi3 p{color:blue;}</style>
</head>
<body><div class="hezi1" id="box1"><div class="hezi2" id="box2"><div class="hezi3" id="box3"><p>猜猜我是什么颜色？</p></div></div></div>
</body>因为p标签是三个div盒子的后代标签，所以会继承他们的样式，三种样式同时作用在p标签上，所以需要比较每个div盒子的权重，才能确定p到底是什么颜色。比较三者权重后，得知1,1,1>1,0,3>0,3,4,所以p标签应该是红色的。各位可敲代码实验一下。
注意：权重不进位。实际上是能进位的，但是不具有实战意义，所以用不着。
情况2：如果权重一样，谁写在后面谁的。
情况3：通过继承影响的，权重为0。
示例：
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">#hezi1 #hezi2 #hezi3{color:red;}div.box div.box div.box{color:blue;}p{color:green;}</style>
</head>
<body><div class="box" id="hezi1"><div class="box" id="hezi2"><div class="box" id="hezi3"><p class="pp">我是什么颜色？</p></div></div></div>
</body>第一个和第二个选择器都没有选中:文字所在的最内层标签，所以p只受其继承性影响，权重为0.第三个选择器直接选中p标签，权重为0,0,1，所以p的颜色应该是绿色的。
情况4：如果权重都为0，谁描述得最靠近内容，听谁的（就近原则）。
情况5：如果同一个标签携带的多个类名有冲突，和标签里面的挂类名无关，只和css摆列顺序有关，谁在后面听谁的。
总结：
1）选中了，数权重，听大的。一样大，听写后面的。
2）没选中，谁描述得最靠近内容听谁的。
如图所示：
三、！important标记的性质
基本语法：
k:v!important;它给一个属性提高权重。这个属性的权重就是无穷大
注意：
1） !important提升的是一个属性，而不是一个选择器。
2） !important无法提升继承的权重。
3）如果都是继承来的， !important不影响就近原则。（选中了，不管权重相同，都受！important能影响。）
4)实际做网站的时候，不允许使用! important，因为这会让css很乱。
这篇关于CSS学习笔记4：CSS层叠性、继承性以及权重计算的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
