Почему селектор прямого потомка CSS не применяется к компоненту Angular
У нас есть этот простой main.html
<app>
<sidebar></sidebar>
<main-content>
<router-outlet></router-outlet>
</main-content>
</app>
Когда мы загружаем простой компонент через маршрутизацию (изменение URL), HTML становится следующим:
<app>
<sidebar></sidebar>
<main-content>
<router-outlet></router-outlet>
<component></component>
</main-content>
</app>
Первый вопрос: почему <component> не встраивается внутри <router-outlet>, а становится родным братом.
Однако этот CSS не применяется к тегу <component>:
app sidebar main-content > * {
background: red;
}
Когда мы проверяем, <router-outlet> имеет этот стиль, но <component>, который является прямым потомком <main-content>, не имеет этого стиля.
Что здесь не так?
Откройте в браузере инструменты разработчика. Посмотрите на панель «Элементы». Посмотрите на элемент <component>. Посмотрите на вкладку "Стили". Применяется ли стиль в соответствии с этим? Это что-то отменяется? Он применяется, но не виден (например, потому что нет высоты, на которой он должен быть виден)? Действительно ли <component> является потомком <main-content>?
для стиля, который вы должны использовать: host / deep /, чтобы применить стиль к вложенному компоненту
Стиль не применяется.
Ответы 1
На основе вашего указанного кода:
<app>
<sidebar></sidebar>
<main-content>
<router-outlet></router-outlet>
<component></component>
</main-content>
</app>
это
app sidebar main-content > * {
background: red;
}
не будет работать, потому что main-content не является дочерним по отношению к sidebar, а является брат или сестра.
Я предлагаю вам попробовать
app sidebar + main-content > * {
background: red;
}
или даже
app main-content > * {
background: red;
}
Все потомки прямые, символ
>- это дочерний комбинатор (ранее известный как дочерний селектор до разделения селекторов и комбинаторов)