css 没有被应用“.class” over "> div" 标签答案

【问题标题】：css not being applied ".class" over "> div" tagcss 没有被应用“.class” over "> div" 标签
【发布时间】：2020-08-11 11:30:19
【问题描述】：

我有下面的 CSS，如果它与某个类匹配，我想将 div 中的颜色更改为蓝色，

我试过了，但是没用

&__header {
    display: flex;
    justify-content: space-between;

    .list-row__statAG {
      color: #315ec5; ///this is not applied 
      border-bottom: 1px solid #315ec5;
      height: 80px;
    }
    .list-row__scTG {
      color: #315ec5; ///this is not applied 
      border-bottom: 1px solid #315ec5;
      height: 80px;
    }
    &>div {
      text-align: left !important;
      color: #B9BABD !important; ////it is using this color -----How can I override this ?

    }
  }

我也尝试过进行以下更改，但它仅适用于第二个元素，我可以为 div:not('.list-row__scTG','.list-row__statAG 之类的类添加 not 条件吗？ ')

  &>div:not(:nth-last-of-type(2)) {

【问题讨论】：

你的覆盖应该是什么？ &.class > div 还是 & > div.class？您使用!important 分配颜色，这很可能会成为一个问题。此外，要链接not()，您现在不能在单个选择器中列出它们（即将推出），您需要使用div:not(.list-row__scTG):not(.list-row__statAG)。
感谢颜色：#B9BABD !important;

标签： html css vue.js sass

【解决方案1】：

试试这个；

&__header {
display: flex;
justify-content: space-between;

.list-row__statAG {
  color: #315ec5 !important; 
  border-bottom: 1px solid #315ec5;
  height: 80px;
}
.list-row__scTG {
  color: #315ec5 !important; 
  border-bottom: 1px solid #315ec5;
  height: 80px;
}
&>div {
  text-align: left !important;
  color: #B9BABD !important; 

}

}

【讨论】：