Стиль HTML-элемента не работает в стиле с ограниченной областью действия
По какой-то причине мой стиль элемента не работает при использовании области видимости. При проверке элемента стиль не применяется при использовании области действия. Мне нужно использовать область действия, потому что я хочу, чтобы стиль применялся только к этому компоненту. Я использую nuxt.js, понятия не имею, связано ли это с проблемой.
Не работает:
<style scoped>
a {
color: red !important;
text-decoration: underline !important;
}
</style>
Работающий:
<style>
a {
color: red !important;
text-decoration: underline !important;
}
</style>
Есть идеи?
<a> должен быть внутри компонента, а не слот внутри компонента
Ответы 1
Как объяснено в соответствующая документация, CSS с областью действия применяет атрибут data- ко всем селекторам в предоставленном CSS, чтобы он применялся только к элементам компонента, а не за его пределами, или к вложенным подкомпонентам.
Например, с этой разметкой:
<app>
<a>outside link</a>
<Parent>
<a>parent link</a>
<Child>
<a>child link</a>
</Child>
</Parent>
</app>
scoped CSS <Parent> повлияет только на родительскую ссылку и не повлияет на внешнюю ссылку ни дочерней ссылки.
Судя по тому, что вы описываете, вы пытаетесь создать ссылку на подкомпонент.
Чтобы ваши селекторы CSS с ограниченной областью действия оказывали глубокое влияние (также применялись к подкомпонентам), вы должны использовать комбинатор deep >>>:
<style scoped>
* >>> a {
color: red;
text-decoration: underline;
}
</style>
Чтобы увидеть это в действии, рассмотрим этот пример.
Спасибо! Это сработало и отличное объяснение!
Где
aпо отношению к<style>? Можете ли вы предоставить репродукцию Codepen/Codesandbox?