CSS:将CSS样式应用于除材料角度以外的任何东西。

Question

如何将CSS样式(justify-content: center或box-sizing: border-box )应用于所有子元素和外孙元素，但以

我们将字面上有500+元素，需要有效地应用这一点。注意到，进入孙辈的内在物质元素，并应用边框或中心可能会破坏其显示。

有我可以申请的垫子关键字搜索吗？有大量的mat div元素，mat-input, mat-select, mat-tab, etc

尝试用选择器开始应用css，

selectors.asp

.container *not(%.mat) {
    box-sizing: border-box
}


<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input><mat-input>

Answer 1

.container *:not([class^="mat"]) {
    background: red;
}

这就是你可能要搜索的代码。

[class^="mat"]将匹配以mat开头有类的任何元素。

[class*="mat"]将与类名中任何位置具有mat的任何元素相匹配。

根据你的情况使用其中任何一种。

Answer 2

我想你以后可以试着重新设置它。

您可以使用选择器。

.container * {
  display:flex;
}

之后，为mat-input添加前面的值

.container * {
  display:flex;
}
.mat-input {
  display:flex; /* or whatever it was previously */
}

Answer 3

不是您想要的确切解决方案，假设您有不同的以"mat“开头的元素，而不仅仅是mat-input，我将向所有这些元素中添加一个类，并使用:not关键字。类似于：

.container *:not(.mat) {
    display:flex;
}


<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input class="mat"><mat-input>

在这弹琴中可以看到一些可视的东西。

如果只有少量的"mat“元素，还可以多次使用:not关键字，如下所示：

.container *:not(mat-input):not(mat-output) {
    display:flex;
}


<div class="container">
  <div class="document-holder">
    <div class>error_outline</div>
    <mat-input><mat-input>
    <mat-output></mat-output>