Что в три раза больше селектора в css?

Я видел следующий код CSS с тем, что кажется втрое большим, чем селектор.

.b-table >>> .table-wrapper {
  overflow-x: auto; 
}

Я знаю, что это ссылка на компонент таблицы Buefy и применение определенного стиля к элементам, имеющим класс table-wrapper, но что именно означает оператор >>>? Основываясь на этом ответе, я думаю, что это может быть для применения стилей к детям детей детей, это точно? Если да, то почему это не работает с другими количествами >?


html css sass buefy selector
person Dan Mandel    schedule 22.04.2019    source источник
comment
Это недопустимый CSS. Вы используете препроцессор?   -  person APAD1    schedule 23.04.2019
comment
Интересный. Я думаю, что кодовая база использует Sass и PostCSS.   -  person Dan Mandel    schedule 23.04.2019
comment
Вы используете старую версию Angular? Если это так, то это устаревший эквивалент ::ng-deep   -  person Chris W.    schedule 23.04.2019
comment
@Chris W. Нет, он использует Vue.   -  person Dan Mandel    schedule 23.04.2019
comment
Vue также использует его.   -  person Chris W.    schedule 23.04.2019

Ответы (2)


arrow_upward
12
arrow_downward

Оператор >>> является специфичной функцией Vue.js и называется < strong>глубокий селектор. В 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>
person noobar    schedule 14.10.2020

arrow_upward
0
arrow_downward

Это пронзающий тень комбинатор потомков. В 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)

person Lee Chee Kiam    schedule 16.07.2021