题目

2.(2.0分)下列代码运行后的显示效果为?< style >#s(color:orange)div(color:red)span(color:blue)span a(color:green)< div id="s" class="ss">内容1< span>内容2< a>内容3A “内容1”橙色，“内容2”蓝色，“内容3”蓝色B “内容1”橙色，“内容2”蓝色，“内容3”绿色

2.(2.0分)下列代码运行后的显示效果为? < style > #s{color:orange} div{color:red} span{color:blue} span a{color:green} < div id="s" class="ss"> 内容1 < span> 内容2 < a>内容3 A “内容1”橙色，“内容2”蓝色，“内容3”蓝色 B “内容1”橙色，“内容2”蓝色，“内容3”绿色

题目解答

答案

问题解析

我们需要分析给定的HTML和CSS代码，确定每个文本内容的颜色。

HTML 结构

<div id="s" class="ss">
  内容1
  <span>
    内容2
    <a>内容3</a>
  </span>
</div>

CSS 样式

#s { color: orange; }
div { color: red; }
span { color: blue; }
span a { color: green; }

逐条分析

  1. #s { color: orange; }

    • 这个选择器匹配ID为s的元素，将其文本颜色设置为橙色。
    • 在HTML中，<div id="s" class="ss"> 匹配这个选择器，因此“内容1”会被设置为橙色。

  2. div { color: red; }

    • 这个选择器匹配所有的<div>元素，将其文本颜色设置为红色。
    • 由于#s的选择器优先级高于div，所以“内容1”最终还是橙色。

  3. span { color: blue; }

    • 这个选择器匹配所有的<span>元素，将其文本颜色设置为蓝色。
    • 在HTML中，<span> 包含“内容2”和“内容3”，因此“内容2”会被设置为蓝色。

  4. span a { color: green; }

    • 这个选择器匹配所有在<span>元素内的<a>元素，将其文本颜色设置为绿色。
    • 在HTML中，</a><a> 元素在<span>内，因此“内容3”会被设置为绿色。

最终显示效果

  • “内容1”：橙色（因为#s的选择器优先级最高）
  • “内容2”：蓝色（因为span选择器将其设置为蓝色）
  • “内容3”：绿色（因为span a选择器将其设置为绿色）

答案

正确答案是 B “内容1”橙色，“内容2”蓝色，“内容3”绿色。

解析

本题主要考察CSS选择器的优先级及样式继承与覆盖规则，需结合给定HTML结构和CSS代码分析各文本内容的颜色。

步骤1：分析HTML结构

HTML代码为： 

<div id="s" class="ss"> 内容1 <span> 内容2 <a>内容3</a> </span> </div>
  • div元素有id="s"，包含“内容1”；
  • span元素嵌套在div内，包含“内容2”和a元素；
  • a元素嵌套在span内，包含“内容3”。

步骤2：分析CSS样式及优先级

CSS代码为： 

s{color:orange}       /* ID选择器，优先级最高 */
div{color:red}         /* 元素选择器，优先级低于ID选择器 */
span{color:blue}       /* 元素选择器，作用于span及其内部文本（除非被覆盖） */
span a{color:green}    /* 后代选择器，作用于span内的a元素，优先级高于span的元素选择器 */

步骤3：确定各文本颜色

  • 内容1：所在div的id="s"匹配#s{color:orange}，ID选择器优先级高于div{color:red}，故为橙色；
  • 内容2：所在span匹配span{color:blue}，无更高优先级样式覆盖，故为蓝色；
  • 内容3：所在a元素匹配span a{color:green}，后代选择器优先级高于span{color:blue}，故为绿色。