​x
 
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  container-name: myContainer;
  container-type: inline-size;
}
​
/* 如果 myContainer 的宽度小于 500px，则添加以下样式 */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;    
    background-color: salmon;
  }
}
</style>
</head>
<body>
​
<h1>@container 示例</h1>
 
<p>调整页面大小可查看效果。</p>
 
<div class="parent">
  <div class="child">
    <h2>标题</h2>
    <p>一些文本。</p>
  </div>
</div>
​
</body>
</html>
​