css特异性，继承性

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 文字对齐方式为居中而不是靠左。