① 确认匹配：哪些规则作用于它？
段落带有 card 类，因此两条 .card 规则都匹配这个 p。
核心知识
层叠与源码顺序
层叠（cascade）：同一个元素的同一个属性有多个候选值时，浏览器按一套规则确定采用哪条声明。
对照代码
<style>
.card {
color: navy;
font-weight: bold;
}
.card {
color: teal;
}
</style>
<p class="card">唱腔赏析：观察最终颜色</p>后一条规则把文字颜色改为青绿色，但不会取消前一条设置的加粗。颜色与字重分别确定，不是整条规则一起被替换。
② 分开看属性：哪些值需要比较？
color 有 navy、teal 两个候选值，需要比较；font-weight 只有 bold，保留加粗。
③ 条件相同时，比较特异性
在来源、重要性等前置条件相同时，特异性高的优先。本例都是普通样式，且选择器同为 .card，特异性相同。
④ 特异性相同，再看书写顺序
此时后写的 color: teal 生效，文字变为青绿色。特异性如何计算，下一页再介绍。
展开完整代码与运行演示
<style>
.card {
color: navy;
font-weight: bold;
}
.card {
color: teal;
}
</style>
<p class="card">唱腔赏析：观察最终颜色</p>