选择没有特定元素的子 CSS

Posted 2023-03-05

【中文标题】选择没有特定元素的子 CSS

【英文标题】：Select child css without a specific element

【发布时间】：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) * 应该适合你

【参考方案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>