第 8 课 12 / 18 | 编码:L08-26
课堂现场回答 · 单选

随堂测验:自身声明与继承值

只考虑下面代码,段落文字呈现什么颜色?原因是什么?

<style>
  p {
    color: blue;
  }
  section {
    color: red;
  }
</style>
<section>
  <p>黄梅戏分享会</p>
</section>
A

蓝色,因为 p 选择器的特异性高于 section。

B

蓝色,因为 p 已直接设置文字颜色,不会继承父元素的红色。

C

红色,因为 section 的颜色规则写在后面。

D

红色,因为子元素必须继承父元素的 color。

现场说出你的选项,并指出一个干扰项错在哪里。

查看参考解析

答案:B。p { color: blue; } 直接为段落设置了蓝色,因此段落不使用从父元素继承的红色。

A 错:p 与 section 都是元素选择器,特异性都是 (0,0,1),不存在“子元素选择器更高”的规则。

C 错:两条规则分别匹配段落和它的父元素,不是在同一元素上竞争。即使 section 的规则后写,也不能据此覆盖段落自身的颜色。

D 错:color 可以继承,但不是必须使用父元素的颜色。若删除本例中的 p { color: blue; },段落才会继承父元素的红色。