CSS: применить CSS стиль ко всему, кроме материала Angular

Question

Как применить стиль CSS (justify-content: center или box-sizing: border-box ко всем дочерним и внучатым элементам, кроме всего, что является Материалом и начинается с

Answer 1

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

Это код, который вы, возможно, ищете.

[class^="mat"] будет соответствовать любому элементу, класс которого начинается с mat.

[class*="mat"] будет соответствовать к любому элементу, имеющему mat в любом месте имени класса.

Используйте любой из них в соответствии с вашей ситуацией.

Answer 2

Как вы просили решение S CSS. В этом примере я использовал SASS List и @ каждый

$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;
}

Answer 3

Что ж, то, что вы хотите, - это действительно действительно плохой способ обхода вещей, поскольку это затрудняет поддержку ваших стилей и может привести к неожиданным проблемам, но эй, вы можете использовать этот css, чтобы установить свойство box-sizing для всех элементы, кроме тех, которые начинаются с mat-.

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

Answer 4

Не точное решение, которое вы ищете, и если у вас есть разные элементы, начинающиеся с «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>

Answer 5

Думаю, вы можете попробовать сбросить его потом.

Вы можете использовать свой селектор

.container * {
  display:flex;
}

и после этого добавить предыдущее значение для mat-input

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

Answer 6

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

Это будет соответствовать всем элементам со списком классов, начинающимся с «mat-», а также элементам со списком классов, содержащим «mat-». Это пространство важно, например, во избежание случайного нацеливания на класс "format-".