html

<div class="introduce"><div class="title">介绍</div><div class="card-box"><div class="card"><div class="title">管理</div></div></div>
</div>

scss

.introduce {.title {text-align: center;}.card-box {.card {width: 300px;background: aqua;text-align: left;.title {color: rgba(0, 0, 0, 0.80);}}}
}

选择器的特异性和继承性，出现了预期之外的样式应用。具体问题在于，.introduce .title 的选择器会覆盖嵌套在 .card-box .card 内的 .title。

HTML 结构内部的 .title 元素也会应用最外层的 .title 样式。这是因为 CSS 的继承性和选择器的特异性（Specificity）。

• .introduce .title 的选择器会将 .title 元素的 text-align 设置为 center。

• .introduce .card-box .card .title 的选择器会将 .title 元素的 color 设置为 rgba(0, 0, 0, 0.80)。

因为 .introduce .title 的选择器优先级较高，它会覆盖嵌套选择器中的 text-align 样式，导致内部的 .title 文字对齐方式为居中而不是靠左。