蓝色,因为 p 选择器的特异性高于 section。
课堂现场回答 · 单选
随堂测验:自身声明与继承值
只考虑下面代码,段落文字呈现什么颜色?原因是什么?
<style>
p {
color: blue;
}
section {
color: red;
}
</style>
<section>
<p>黄梅戏分享会</p>
</section>
蓝色,因为 p 已直接设置文字颜色,不会继承父元素的红色。
红色,因为 section 的颜色规则写在后面。
红色,因为子元素必须继承父元素的 color。
现场说出你的选项,并指出一个干扰项错在哪里。
查看参考解析
答案:B。p { color: blue; } 直接为段落设置了蓝色,因此段落不使用从父元素继承的红色。
A 错:p 与 section 都是元素选择器,特异性都是 (0,0,1),不存在“子元素选择器更高”的规则。
C 错:两条规则分别匹配段落和它的父元素,不是在同一元素上竞争。即使 section 的规则后写,也不能据此覆盖段落自身的颜色。
D 错:color 可以继承,但不是必须使用父元素的颜色。若删除本例中的 p { color: blue; },段落才会继承父元素的红色。