1.子元素并不是可以继承父元素的所有属性,可以使用 inherit 进行强制继承
.box{ width:300px; background:pink; } img{ /*width:100%; 方式一: 宽度会根据父级元素的变化而变化 */ width: inherit; /* 方式二: 强制继承父元素的宽度 */ }
<div class=‘box‘> <img src=‘./img/test.png‘> </div>
2.继承的注意点
CSS属性继承的是计算值,并不是当初编写属性时的指定值(字面值)
<div class=‘div1‘> <div class=‘div2‘> <div class=‘div3‘>继承的是计算值</div> </div> </div>
.div1{ font-size:50px; } .div2{ font-size:50%; /* 25px */ } .div3{ font-size:inherit; /* 25px 此时继承的是父元素 div2 计算后的值 25px,而不是50%*/ }
3.CSS属性的优先级
按照经验,为了方便比较CSS属性的优先级,可以给CSS属性所处的环境定义一个权值(权重)
!important:10000
内联样式:1000
id选择器:100
类选择器,属性选择器,伪类:10
元素选择器,伪元素:1
通配符:0
比较优先级的严谨方法:
从权值最大的开始比较每一种权值的数量多少,数量多的则优先级高,即可结束比较
如果数量相同,比较下一个较小的权值,以此类推
如果所有权值比较完毕后,发现数量都相同,就采取‘就近原则‘
原文:https://www.cnblogs.com/rans/p/12804464.html