我可以根据 class 使用的元素向 SCSS class 添加样式吗？

Question

在我的 Angular 13 项目中，我有一个 class 用于两种类型的元素：<a> 标签和 <mat-panel-title> 标签。我的问题是，我能否为此 class 添加样式，并以仅适用于 a 标签而不适用于其他标签的方式进行添加。

这是scss代码：

.container__menu--item {
    display: flex;
    align-items: center;

    text-decoration: none;

    span {
      padding-inline-start: 8px;
    }
  }

这是 html:

 <a class="container__menu--item" href="#">
    <mat-icon>home</mat-icon>
    <span>{{ 'navbar.main_page' | transloco }}</span>
  </a>

  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title class="container__menu--item">
          <mat-icon svgIcon="services"></mat-icon>
          <span>{{ 'navbar.services' | transloco }}</span>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <ul>
        <li>
          {{ 'navbar.services' | transloco }}
        </li>
        <li>
          {{ 'navbar.services' | transloco }}
        </li>
      </ul>
    </mat-expansion-panel>
  </mat-accordion>

Answer 1

如果您只想将样式应用于 <a> 和 class container__menu--item，您可以简单地组合选择器，例如 a.container__menu--item:

a.container__menu--item {
    ... /* your styles */
}

Answer 2

你可以做任何一个

.container__menu--item {
    <shared style>

    a {
      <specific style>
    }
}

或者对不同的元素使用两个单独的类，但本质上是使用 @extend 将一个的样式复制到另一个。例如，这看起来像

.container__menu--link {
    @extend .container__menu--item
 }

其中 container__menu--link 应用于 a 标签，container__menu--item 应用于 mat-panel-title。

我可以根据 class 使用的元素向 SCSS class 添加样式吗？

Can I add a style to an SCSS class based on the element the class in used on?

html

css

sass

angular