CSS：除Material Angular外，将CSS样式应用于所有内容

Question

如何将CSS样式（justify-content：center或box-sizing：border-box）应用于所有子元素和孙子元素，除了任何以<mat开头的Material元素？是否有一种简单的方法在CSS / SCSS中进行文本搜索？

我们实际上会有500多个元素，需要有效地应用此样式。 注意到进入Material的孙元素，并应用border-box或center可能会破坏其显示。

是否有一个可以应用mat关键字搜索的方法？有许多mat div元素，例如mat-input，mat-select，mat-tab等 尝试应用以开头选择器开始的CSS。

https://www.w3schools.com/css/css_attribute_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>

- user13889515

Answer 1

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

这就是你可能正在寻找的代码。

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

[class*="mat"] 将匹配任何类名中包含 mat 的元素。

根据情况使用它们中的任何一个。

- Kumar Sidharth

---

我建议使用“mat-”而不是“mat”。 - Stefan Norberg

Answer 2

我认为您可以尝试在此之后重置它。

您可以使用您的选择器

.container * {
  display:flex;
}

然后添加上mat-input的先前值

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

- onetwo12

---

看到了，不确定它们是在 flex 还是 bordersize 上，想要回退。 - user13889515

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>

在此 jsfiddle中可以看到一些可视化内容。

如果您只有少量的 "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>

- Bossipo

---

有趣的是，我能否进行一个 mat 关键字搜索，而不是列出所有的 mat 元素？ - user13889515

在 not 运算符的文档中，我没有看到默认的方法来执行它。 - Bossipo

Answer 4

好的，你想要的方法真的非常糟糕，因为它使你的样式难以维护并可能导致意外问题，但是，嘿，你可以使用这个CSS将box-sizing属性设置为除了以mat-开头的元素之外的所有元素。

.container *:not([class^="mat-"]) {
  box-sizing: border-box;
}

- Ali Demirci

Answer 5

因为你要求 SCSS 的解决方案。在这个例子中，我使用了 SASS List 和 @each。

$matList: input, select, tab; /* list of `mat-`s */
$notList: ""; /* empty variable */

/* adding :not() statmant for each $matList item */
@each $not in $matList {
  $notList: $notList + ':not(mat-#{$not})';
}

/* gets the result of $notList */
.container *#{$notList} {
  box-sizing: border-box;
}

无论如何，你仍然需要将mat-标签（仅包括“-”后面的部分）的列表插入$matList中，但以更简单的形式。否则，您将不得不使用JavaScript来获取所有map-元素的列表。

编译后您将获得：

.container *:not(mat-input):not(mat-select):not(mat-tab) {
  box-sizing:border-box;
}

- focus.style

Answer 6

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

这将匹配所有类列表以“mat-”开头的元素，以及包含“ mat-”的类列表的元素。那个空格很重要，以避免意外地针对“format-”类进行目标定位。

- Tommy Hare