理解规则,再判断结果
同一个颜色,来自哪里?
先区分“从父元素继承”与“直接给元素赋值”。
<style>
section { color:navy; } /* 深蓝色 */
p { color:teal; } /* 青绿色 */
p { color:crimson; } /* 深红色 */
</style>
<section><p>活动通知</p></section>
- 只有没有获得自身指定值时,color等可继承属性才使用继承值。
- 本例p两条规则的来源、重要性与特异性相同,因此后写的crimson获胜。
- 第8课继续比较不同选择器,不把“后写优先”当成无条件规则。
提问
删除最后一条p规则后会变成父元素的深蓝色吗?如果删去两条p规则呢?
展开参考分析
只删最后一条,仍由p直接获得teal;两条都删后才继承section的navy。父元素选择器再复杂,也不会通过继承去压过子元素已有的直接声明。