css特异性，继承性

2301_789169542025-02-22 10:42

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