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

Posted 2023-03-05

【中文标题】CSS：将 CSS 样式应用于除 Material Angular 之外的所有内容

【英文标题】：CSS: Apply CSS Style to Everything except Material Angular

【发布时间】：2020-11-23 23:16:39

【问题描述】：

如何将 CSS 样式（justify-content: center 或 box-sizing: border-box 应用于所有子元素和孙子元素，除了任何 Material 且以

我们实际上将有 500 多个元素，需要有效地应用它。 注意到进入 Material 的孙子内部元素，并应用边框或中心可能会破坏它的显示。

是否有我可以应用的 mat 关键字搜索？有很多mat div元素，mat-input, mat-select, mat-tab, etc

尝试应用 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>

【参考方案1】：

我想你可以尝试在之后重置它。

你可以使用你的选择器

.container * 
  display:flex;

然后添加mat-input的前一个值

.container * 
  display:flex;

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

【讨论】：

看看，不确定他们是在 flex 还是 bordersize，想恢复

【参考方案2】：

不是您正在寻找的确切解决方案，并且假设您有不同的以“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>

在this 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>

【讨论】：

有趣，我可以做一个mat关键字搜索，而不是列出所有的mat元素吗？

在 not 运算符的the documentation 中，我看不到默认的方法

【参考方案3】：

好吧，您想要的是一种非常糟糕的解决方法，因为它使您的样式难以维护并且可能导致意外问题，但是，您可以使用此 css 将 box-sizing 属性设置为除那些以mat-开头。

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

【参考方案4】：

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

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

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

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

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

【讨论】：

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

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

无论如何，您仍然需要在 $matList 中插入 mat- 标签列表（仅在“-”之后的部分），但形式要容易得多。否则，您将不得不使用 javascript 来获取所有 map- 元素的列表。

编译后得到

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

【参考方案6】：

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

这将匹配类列表以“mat-”开头的所有元素，以及类列表包含“mat-”的元素。例如，该空间对于避免意外定位“格式”类很重要。