选择没有特定元素的子 CSS答案

【问题标题】：Select child css without a specific element选择没有特定元素的子 CSS
【发布时间】：2022-01-13 11:55:51
【问题描述】：

我想在所有mat-tab-group 元素中应用css 样式而不影响app-form 元素的样式

<div class="area">
  <childhere></childhere>
  <mat-tab-group>
    <mat-tab *ngFor="..." [label]="label">
      <form [formGroup]="formGroup">
        <div class="inside-tab">
          <mat-form-field>...</mat-form-field>
          <mat-form-field>...</mat-form-field>
          <mat-form-field>...</mat-form-field>
          <mat-form-field>...</mat-form-field>
        </div>
        <app-form></app-form>
      </form>
    </mat-tab>
  </mat-tab-group>
</div>

我尝试使用 :not 属性，但它不起作用

mat-tab-group > mat-tab > form :not(:last-child){
  background-color: #009926; //to test
}

有什么建议吗？

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
您不能根据孩子的存在或其他情况来选择父母。
我不明白你为什么不使用mat-tab-group > mat-tab > form .inside-tab { background-color: #009926; } 之类的东西？ app-form css 是否被特异性覆盖？或者它有background: transparent 并且颜色显示出来？
嗨@coll，app-form 是一个具有特定css 样式的角度组件，您的代码仅选择.inside-tab 元素，我想将样式应用于mat-tab-group 元素而不更改应用形式的样式。
mat-tab-group > mat-tab > form > *:not(app-form), mat-tab-group > mat-tab > form > *:not(app-form) * 应该适合你

标签： html css angular css-selectors

【解决方案1】：

mat-tab-group > mat-tab > form {
  background-color: #009926; //to test
}

mat-tab-group > mat-tab > form:last-child {
  background-color: unset;
}

这样，最后一个子背景将回退到默认值。

stackblitz example

片段：

div > div > * {
  background-color: blue;
  color: white
}

div > div > *:last-child {
  background-color: green;
}

<div>
  <div>
<p>first</p>
<p>secont</p>
<p>last</p>
  </div>
</div>

【讨论】：