如何修复SCSS优先级问题，让面包屑文本显示紫色？

问题说明 #

面包屑中的「Go To Page2」文本原本应显示紫色（var(--bs-purple)），但受另一SCSS文件的全局样式影响，当前显示为粉色（var(--bs-pink)）。需要在不使用!important的前提下，通过调整Sass选择器优先级解决此问题。

相关代码 #

HTML结构 #

<div class="container">
  <div class="cmp-container">
    <div class="my-grid">
      <div class="breadcrumb container">
        <nav class="cmp-breadcrumb">
          <ol class="cmp-breadcrumb__list">
            <li class="cmp-breadcrumb__item">
              <a href="/content/page2.html" class="cmp-breadcrumb__item-link">
                <span class="cmp-breadcrumb__link-text">Go To Page2</span>
              </a>
            </li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</div>

面包屑专属SCSS（breadcrumbs.scss） #

.theme1 {
    .cmp-breadcrumb {
        .&__item-link {
                color: var(--bs-purple);
        }
    }
}

冲突的全局SCSS代码 #

.theme1 {
    .container {
        a {
            color: var(--bs-pink);
            &:hover {
                color: var(--bs-pink);
            }
        }
    }
}

解决方案 #

方法1：提升选择器优先级（添加父容器类） #

修改breadcrumbs.scss，将.cmp-breadcrumb嵌套到.container下，让选择器层级匹配HTML结构，优先级超过全局样式：

.theme1 {
  .container {
    .cmp-breadcrumb {
      .&__item-link {
        color: var(--bs-purple);
      }
    }
  }
}

编译后生成的选择器为.theme1 .container .cmp-breadcrumb .cmp-breadcrumb__item-link，优先级高于冲突的.theme1 .container a，会优先生效。

方法2：细化选择器层级 #

通过添加父元素类进一步明确选择范围，提升优先级：

.theme1 {
  .cmp-breadcrumb {
    .cmp-breadcrumb__item {
      .cmp-breadcrumb__item-link {
        color: var(--bs-purple);
      }
    }
  }
}

编译后选择器为.theme1 .cmp-breadcrumb .cmp-breadcrumb__item .cmp-breadcrumb__item-link，优先级足够覆盖全局样式。

方法3：直接选中文本容器 #

由于文本实际放在<span class="cmp-breadcrumb__link-text">中，直接给该span设置颜色，绕开a标签的样式冲突：

.theme1 {
  .cmp-breadcrumb {
    .cmp-breadcrumb__link-text {
      color: var(--bs-purple);
    }
  }
}

方法4：调整文件加载顺序 #

如果上述方法不适用，可将breadcrumbs.scss的引入顺序放在冲突的全局SCSS文件之后。当选择器优先级相同时，后加载的样式会覆盖先加载的。

内容的提问来源于stack exchange，提问作者mrjayviper