为什么当我在组件的scss中指定选择器时，它会禁用所有样式？

Question

我添加了一些scss文件后，这似乎在stackblitz.com离子启动器中发生了，这是我在此链接上对其的再现。

https://stackblitz.com/edit/ionic-tsswro?file=pages/home/Comp1.scss

Component Comp1能够设置样式，而不受其容器的影响，在此示例中为“ home”组件。这是预期的行为，这是预期的结果。

但是，如果我在选择器中包括选择器“ Comp1”，它将禁用所有功能？？？如果我指定选择器“ home”，home.scss同样如此，它也会禁用样式???

在我的开发环境中，我一直在使用选择器，以为我最近遇到了一种情况，我想在Stackblitz中重现该问题，是容器的样式优先于孩子的scss。

Answer 1

您不能只是这样添加它，您还必须将它作为id添加到html主容器中：

HTML：

<div id="Comp1">
<H2> Comp1 text in H2 tag </H2>

<h2> Comp1 H2 should be Green on Blue </h2>
  <p> 
    Comp1 text in p tag.    
  </p>

</div>

SCSS：

#Comp1 {
   h2 {
      font-size: 4vh;
      color: rgb(40, 247, 4) ; // !important;
      background: rgb(11, 58, 146) ;
    }

    div {
      background: rgb(165, 191, 240) ;
      padding: 2vmin;
    }

}