1 · 判断初始结果
A、B 的文字分别是什么颜色？各自匹配了哪些选择器？
代码回顾 · 提问
代码推演：选择器匹配与最终颜色
CSS 写在 head 的 style 中
.panel {
color: navy; /* 深蓝色 */
}
.panel .item {
color: teal; /* 青绿色 */
}
.panel > .item {
color: crimson; /* 深红色 */
}HTML 写在 body 中
<section class="panel">
<p class="item">A：唱腔赏析</p>
<div>
<p class="item">B：服饰与舞台</p>
</div>
</section>只考虑以上样式，三问分别从原始代码出发。
2 · 调换规则顺序
只调换后两条 CSS 规则的顺序，哪些段落变色？为什么？
3 · 删除一个类名
只删除 A 所在 <p> 的 class="item"，A 变成什么颜色？为什么？
展开答案与解析
1．A 为深红色，B 为青绿色。A 同时匹配 .panel .item 和 .panel > .item；二者特异性都是 (0,2,0)，本例其他层叠条件相同，因此后写的深红色生效。B 与 .panel 之间隔着 div，只匹配后代选择器 .panel .item，所以为青绿色。
2．只有 A 变色：A、B 都为青绿色。调换后，.panel .item 写在后面，决定 A 的颜色；B 仍只匹配这一条颜色规则。> 限制的是直接子元素关系，并不会增加特异性。
3．A 变为深蓝色。删除 A 的类名后，后两条选择器都不再匹配 A；它自身没有文字颜色声明，因此继承父元素 .panel 的深蓝色。这不是 .panel 直接选中了 A。