css @container 容器查询 查询高度不生效？

Question

直接上 codepen demo
codepen

我希望能查询 container 元素的高度，高度超出指定高度后改变背景色但是没生效，完整代码如下

<template>  <div id="app">    <div class="container">      <div class="item" v-for="item in data" :key="item">{{ item }}</div>    </div>  </div></template><script>export default {  data() {    return {      data: [1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15]    };  }};</script><!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> --><style>  #app {    width: 210px;    height: 24px;    overflow: hidden;  } .container {   container: container / inline-size;   display: flex;   flex-wrap: wrap;   margin-right: -20px;}  .item {    padding: 5px 10px;    margin-right: 20px;    font-size: 12px;    background: #eee;    border-radius: 3px;  }  @container container (height > 24px) {    background: #eee !important;  }</style>

@container 兼容性一般，建议用最新版本的 chrome/safari/firefox 打开

Answer 1

@Controller 不是选择器呀，它和媒体查询 @media 一样，只是匹配条件，选择器还是要自己写的

题主的写法：

@container container (height > 24px) {    /*没有选择器*/    background: #eee !important;}

正确写法：

@container container (height > 24px) {    .item {        background: #eee !important;    }}

这个术语叫做 at-rules，官方描述是：

At-rules are CSS statements that instruct CSS how to behave
At规则 是一个 CSS 语句，用来指示 CSS 如何运行

官方文档参考：

At-rule

Answer 2

试试这个语法：

https://codepen.io/Lionad/pen/abQQYPL

---

见 MDN 文档，楼主应该是忘记给 container 命名了，所以用 container-type 有效，但是直接用 container 无效。