Сначала контейнер необходимо зарегистрировать, и к нему можно выполнить запрос.
Используйте селектор для регистрации контейнера.
.parent { container-name: myname; container-type: inline-size; ... other code }
или используйте сокращенную опцию
.parent { container: myname / inline-size; ... other code }
Во время регистрации необходимо указать две детали — тип и имя.
тип-контейнера: ...
имя-контейнера: ;
Запрос контейнера начинается с at-правила @container, за которым следуют имя контейнера и запрос функции.
div { font-size: 2em; } @container myname (width: > 30ch) { div { font-size: 3em; } }
запрос контейнера для установки размера шрифта для элемента div внутри контейнера myname равным 3em, если ширина объекта превышает 30 каналов.
запрос размера...
запрос стиля...
стоимость объекта, который необходимо проверить.
например,
@container contname style('background-color: blue') { ... styles ... }
Запрос контейнера для применения стилей, если фоновый цвет имени контейнера синий
and или and not можно использовать для создания составных запросов
например,
@container myname (width>30ch) and (height>100px) { ... } @container myname not (color: blue) { ... }
Запросы контейнера могут быть вложены в другие запросы контейнера.
например,
@container myname (width>30ch) { ... @container myname (background-color: blue) { ... } @container myname (background-color: red) { ... } }
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3