В чем разница между app-root {} и app-root * {} в угловых css / scss

Question

Во-первых, я предполагаю, что app-root{} представляет HTML-тег <app-root></app-root>.

Я видел это: шаблон * в CSS для классов , но я все еще не понимаю.

Зачем кому-то использовать app-root * {}?

Я видел, как он используется в этом проекте с открытым исходным кодом .

Какая разница, если вы используете app-root * {} вместо app-root{} в вашем файле стилей в угловых?

РЕДАКТИРОВАТЬ: Изменено app-root*{} на app-root * {} для более точного представления вопроса.

Answer 1

То, что вы видели, не app-root*, а app-root *. Пробел между селектором и звездочкой (*) очень важен, это означает child of.

Вместо этого звездочка означает «любой элемент».

Вкратце, этот селектор означает «любой элемент, который является потомком app-root»

Answer 2

Просто чтобы исправить вас, вы написали app-root*{}.Это не то, что в этой таблице стилей.У них есть app-root * {} (обратите внимание на пробелы).

Это означает, что каждый непосредственный потомок app-root получает стили.

Если бы они написали app-rrot p {}, это означало бы каждый p то есть ребенок app-root получит стили.если бы они написали app-root div {}, то каждый div, являющийся потомком app-root, получил бы стили.Но они написали app-root * {}, поэтому каждый дочерний элемент (любой элемент) app-root получает эти стили.