如何为 Element => Element Class => Child Class 编写 CSS

Question

您好，我正在使用在我的应用程序中全局使用的子组件。所以现在我只想在这个子组件特定于我的要求时更改它的几个 CSS 属性。我想在这里为 description 和 end 类应用不同的属性。如何使用 SCSS 实现这一点，我们是否有可能在没有重要标签的情况下实现它？

*****HTML*******

<my-parent class="parent"> 
//I have added myflag to identify this has to apply only in case of my scenario
 <global-child [class.myFlag]="myFlag===true">
  <div class="child">
    <div class="description">test</div>
    <div class="end">end</div>
  </div>
</global-child>
</my-parent>

这就是我尝试应用我的 css 的方式，它正在增加高度但不是颜色用于描述 *****SCSS******

    global-child.myflag{
      height: 100px !important
    &.description{
      color: blue !important
    }
}

编辑 1：肯尼的回答看起来不错，但它仍然对我不起作用。我想的原因如下。如果这是正确的，如何在我的场景中实现这一点。

“我在 my-parent.scss 中添加新的 CSS。全局子组件在 global-child component.scss 中有它的样式。我相信我的新 SCSS 代码（它是父级）在 globalchild 之前加载。会这样吗是它没有反映在页面上的原因吗？”

编辑 2： 更新了 HTML 上面和下面的一些变化是我的孩子和父母 css

****全局子css****

.child {
  display: flex;
  flex-direction: row;

  &-description {
    width: 100%;
    color: BLACK;
    position: relative;
    }
  }

****父级css*****

  .parent{
     global-child.myflag {
        height: 100px;

       .description {
          color: blue;
       }
     }
   }

Answer 1

这会起作用

global-child.myflag {
   height: 100px;

  .description {
      color: blue;
  }
}

现在何时使用&

当你在同一个元素上上课时

如果你有类似的元素

<global-child class="myflag description">

那么你应该使用& 将属性应用到global-child 元素

但在您的情况下，.description 是 global-child 元素的子元素。

这样就可以了

global-child {
   &.myflag {
      // css properties

      .description {
           // css properties for `.description` those are child of `global-child.myflag
      }
   }

   .description {
           // css properties for `.description` those are child of only `global-child
      }

}

Answer 2

Kenny 的回答对于应用 CSS 样式是正确的，但对我来说，问题是由于角度的样式范围。在我的角度组件上将 viewEncapsulation 设置为 NONE 为我解决了这个问题。