Что в три раза больше селектора в css?
Я видел следующий код CSS с тем, что кажется втрое большим, чем селектор.
.b-table >>> .table-wrapper {
overflow-x: auto;
}
Я знаю, что это ссылка на компонент таблицы Buefy и применение определенного стиля к элементам, имеющим класс table-wrapper, но что именно означает оператор >>>? Основываясь на этот ответ, я думаю, что это может быть для применения стилей к детям детей детей, это точно? Если да, то почему он не работает с другими количествами >?
Интересно. Я думаю, что кодовая база использует Sass и PostCSS.
Вы используете старую версию Angular? Если это так, то это устаревший эквивалент ::ng-deep
@Chris W. Нет, он использует Vue.
Вью использует его также.
Ответы 2
>>> оператор является специфичной функцией Vue.js и называется глубокий селектор. В CSS с заданной областью вы не можете применить CSS к дочерним компонентам без глубокого селектора.
В вашем примере эти два селектора не будут применяться.
<style scoped>
.table-wrapper {
overflow-x: auto !important; /* won't work */
}
.b-table .table-wrapper {
overflow-x: auto !important; /* won't work */
}
</style>
Нужен глубокий селектор.
<style scoped>
.b-table >>> .table-wrapper {
overflow-x: auto;
}
</style>
Это пронизывающий тень комбинатор потомков. В Angular >>>, /deep/ и ::ng-deep одинаковы (источник: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). Он устарел, и его поддержка прекращена в основных браузерах. Например, он был удален, начиная с версии Chrome 63, примерно 5 декабря 2017 года (источник: https://www.chromestatus.com/feature/6750456638341120).
Это недопустимый CSS. Вы используете препроцессор?