Angular SASS子选择器未找到其目标

好的，我有以下HTML（通过angular 6）

一直到第三方，一切都正常（我用我的蓝色背景来看看到底发生了什么）

---

我已经尝试了各种组合，以使垫标签标题被击中，但它没有它。我试过了。对于类名、子选择器>，以及我所做的任何事情，我都不会点击mat选项卡标题，从而隐藏

我只是随便说说而已，有人能看出我做错了什么吗？ 更新：见下面我的图片，html有点膨胀，但你可以看到html看起来适合这个SASS

在你的sass中

mat-tab-group {
  background-color: yellow;
  height: 100%;
  display: inherit; 

  &.is-third-party {
       background-color: blue;

       mat-tab-header {
            display: none !important;
       }
  }

它应该是（注意mat选项卡组前的“.”

---

您的样式不适用于嵌套在角度组件中的角度材质组件，因为存在角度。默认情况下，嵌套在组件模板中的任何组件都不会继承组件样式

可以使用以下选项定义应用于嵌套在零部件中的其他零部件（如角度材质零部件）的样式：

• 将样式添加到global styles.scss文件中
• 将样式保留在组件中，并关闭此组件的视图封装
• 将样式保留在组件中，并使用已弃用的阴影穿透子体组合器强制将样式应用于所有子元素。（见下面的原始答案）

---

禁用视图封装 在使用角度材质组件的组件上禁用视图封装

@组件({
选择器：“应用程序mycop”，
templateUrl:'./mycomp.component.html'，
样式URL:['./mycomp.component.scss']，
封装：视图封装。无
})

视图封装。无表示Angular不进行视图封装。Angular将CSS添加到全局样式中。范围界定 前面讨论的规则、隔离和保护不适用。这 本质上与将组件的样式粘贴到 HTML。

如果关闭视图封装，请确保只针对真正需要的html元素，因为为该组件定义的样式现在应用于整个Angular应用程序（而不仅仅是一个组件）。（例如，向元素添加自定义类或id）

我发现，禁用视图封装时，可能还必须使用

！重要信息

在CSS中覆盖现有的角度材质样式，而

：ng deep

并不总是需要它

---

使用

：ng deep

将

：：ng deep

放在父选择器前面

请注意，

：：ng deep

当前处于禁用状态

：：ng深垫选项卡组{
背景颜色：黄色；
身高：100%；
显示：继承；
&.是第三方吗{
背景颜色：蓝色；
垫板头{
显示：无！重要；
}
}
}

你是说标题没有隐藏吗？我没有看到mat tab标题被点击，因此hiddenCorrect仍然可见。我添加的任何样式都不会对mat tab header产生影响。代码对我来说很好，您是否100%确定您看到的标题位于

mat tab组内。是否为第三方？

？请尝试在mat tab header:&>之前添加。mat tab header。只是一张纸条，这不起作用。注意：黄色和蓝色的背景正在显示，因此我的代码是现在我得到那么远，是mat tab标题查询不起作用。mat tab标题{display:none！important；}尝试过。mat tab标题也不起作用。查看我编辑的问题，查看我的html@robertoLL这里的问题不是特定性，而是Angular的视图封装，因为选择的答案是有效的，但很快就会被弃用。你能解释一下为什么这样做是有效的，这样也许可以强调解决问题的另一种方法，因为我仍然不完全理解为什么两个父类都是好的，而不是第三个…我自己也不确定为什么这里需要这样做，因为它应该只需要针对子组件中的HTML元素。我猜这和棱角材料的工作方式有关…好吧，这给了我需要的线索。。。。该类是由角度材质组件呈现的html的一部分。如果我将CSS放在父级的styles.scs中，它就会工作。我真的希望能够避免那样做。有办法吗？另一种方法应该是禁用组件上的视图封装：@component（{enclosuration:viewenclosuration.None}）。然后，您必须确保只针对真正需要的mat选项卡标题，而不是子组件中的任何其他标题。可能会向其中添加自定义类。我还没有测试过这个，但很快就会尝试，因为我正在处理同一个问题。我在我的项目中测试了“禁用vie封装”方法，它适合我。更新了我的答案。

 mat-tab-group {
      background-color: yellow;
      height: 100%;
      display: inherit; 

      &.is-third-party {
           background-color: blue;

           mat-tab-header {
                display: none !important;
           }
      }

mat-tab-group {
  background-color: yellow;
  height: 100%;
  display: inherit; 

  &.is-third-party {
       background-color: blue;

       mat-tab-header {
            display: none !important;
       }
  }

.mat-tab-group {
  background-color: yellow;
  height: 100%;
  display: inherit; 

  &.is-third-party {
       background-color: blue;

       mat-tab-header {
            display: none !important;
       }
  }