我使用mat-checkbox创建了一系列复选框，它们分别是Select all一个。我需要的是针对特定的（也是第一个）复选框并隐藏它。只有复选框，而不是标签或mat-checkbox中的任何其他元素。我的复选框是默认的，因此示例如下：
Demo
创建元素后，您将拥有如下所示的结构：

<mat-checkbox _ngcontent-ici-c72="" class="mat-checkbox mat-accent ng-valid ng-dirty ng-touched"
    ng-reflect-model="false" ng-reflect-options="[object Object]" d="mat-checkbox-1">
    <label class="mat-checkbox-layout" for="mat-checkbox-1-input">
      <div class="mat-checkbox-inner-container">
        <input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="mat-checkbox-1-input" tabindex="0"
          aria-checked="false">
        <div matripple="" class="mat-ripple mat-checkbox-ripple mat-focus-indicator"
          ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="false" ng-reflect-radius="20"
          ng-reflect-centered="true" ng-reflect-animation="[object Object]">
          <div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
        </div>
        <div class="mat-checkbox-frame"></div>
        <div class="mat-checkbox-background"><svg version="1.1" focusable="false" viewBox="0 0 24 24"
            xml:space="preserve" class="mat-checkbox-checkmark">
            <path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"></path>
          </svg>
          <div class="mat-checkbox-mixedmark"></div>
        </div>
      </div>
      <span class="mat-checkbox-label"><span style="display: none;">&nbsp;
        </span>Select All</span>
    </label>
  </mat-checkbox>

页面之后创建的所有内容都由Angular加载，除了包含Select All的span元素。我只需要定位包含类mat-checkbox-inner-container的第一个元素。到目前为止，如果我尝试通过CSS，所有包含该类的元素都被隐藏，即所有复选框，而不仅仅是第一个。我还尝试在CSS中创建一个类，并通过TS添加它。没有正面的结果。这是它的代码片段：

checkHider():void {
    let elem = document.getElementsByClassName("mat-checkbox-inner-container")[0];
    elem.classList.add("hider");
  }