{"id":11975,"date":"2025-12-29T09:10:14","date_gmt":"2025-12-29T01:10:14","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=11975"},"modified":"2025-12-30T11:00:18","modified_gmt":"2025-12-30T03:00:18","slug":"css-style-container-range-syntax","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2025\/12\/css-style-container-range-syntax\/","title":{"rendered":"\u4eca\u65e5\u5b66\u4e60CSS style()\u6837\u5f0f\u67e5\u8be2\u53ca\u5176range\u8303\u56f4\u8bed\u6cd5"},"content":{"rendered":"

by zhangxinxu<\/a> from https:\/\/www.zhangxinxu.com\/wordpress\/?p=11975<\/a>
\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\uff0cAI\u6293\u53d6\u4fdd\u7559\u539f\u6587\u5730\u5740\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n

\u4e00\u3001\u5148\u4e86\u89e3\u4e0b\u6837\u5f0f\u67e5\u8be2<\/h3>\n

@container<\/code>\u89c4\u5219\u9664\u4e86\u5c3a\u5bf8\u5339\u914d\uff08\u8fd9\u4e2a\u652f\u6301\u6709\u4e00\u6bb5\u65f6\u95f4\u4e86\uff09\uff0c\u8fd8\u652f\u6301\u6837\u5f0f\u5339\u914d\u3002<\/p>\n

\u76ee\u524d\u9664\u4e86Chrome\u6d4f\u89c8\u5668\uff0cSafari\u6d4f\u89c8\u5668\u4e5f\u5df2\u7ecf\u652f\u6301\u4e86\uff0c\u5b9e\u5728\u662f\u597d\u6d88\u606f\u554a\uff01<\/p>\n

\"\u5bb9\u5668\u6837\u5f0f\u5339\u914d\u67e5\u8be2\u517c\u5bb9\u6027\"<\/p>\n

\u6211\u4eec\u5148\u770b\u4e00\u4e2a\u57fa\u7840\u7684\u6848\u4f8b\uff0c\u57fa\u4e8e--status<\/code>\u53d8\u91cf\u663e\u793a\u4e0d\u540c\u7684\u6837\u5f0f\u3002<\/p>\n

HTML\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n

<section class=\"card\" style=\"--status: success;\">\r\n  <div class=\"status\">\u6210\u529f<\/div>\r\n<\/section>\r\n<section class=\"card\" style=\"--status: error;\">\r\n  <div class=\"status\">\u5931\u8d25<\/div>\r\n<\/section>\r\n<section class=\"card\" style=\"--status: warning;\">\r\n  <div class=\"status\">\u8b66\u544a<\/div>\r\n<\/section><\/pre>\n
\u6b64\u65f6\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u6839\u636e\u5bb9\u5668\u5143\u7d20\u4e0a\u7684--status<\/code>\u53d8\u91cf\u503c\u8fdb\u884c\u9488\u5bf9\u6027\u7684\u6837\u5f0f\u8bbe\u7f6e\uff0c\u4f8b\u5982\uff1a<\/p>\n
@container style(--status: success) {\r\n  .status {\r\n    background-color: green;\r\n  }\r\n}\r\n@container style(--status: error) {\r\n  .status {\r\n    background-color: darkred;\r\n  }\r\n}\r\n@container style(--status: warning) {\r\n  .status {\r\n    background-color: orange;\r\n  }\r\n}<\/pre>\n
\u6b64\u65f6\uff0c\u5c31\u53ef\u4ee5\u5f97\u5230\u7c7b\u4f3c\u4e0b\u56fe\u7684\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n
\"\u5bb9\u5668\u53d8\u91cf\u80cc\u666f\u8272\"<\/p>\n
\u60f3\u8981\u67e5\u770b\u5b8c\u6574CSS\u4ee3\u7801\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aCSS\u5bb9\u5668\u6837\u5f0f\u67e5\u8be2\u57fa\u672c\u4f7f\u7528demo<\/a><\/p>\n
\u6307\u5b9a\u5bb9\u5668\u540d\u79f0<\/h4>\n
\u5982\u679c\u6709\u591a\u4e2a\u5bb9\u5668\uff0c\u7528\u4e86\u540c\u6837\u7684\u53d8\u91cf\u540d\u79f0\uff0c\u90a3\u4e48\u4e0a\u9762\u7684\u6848\u4f8b\u53ef\u80fd\u5c31\u6709\u51b2\u7a81\u7684\u95ee\u9898\u3002<\/p>\n
\u6b64\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u7ed9\u5bb9\u5668\u547d\u540d\u7684\u65b9\u5f0f\u8fdb\u884c\u5904\u7406\u3002<\/p>\n
\u8bf7\u770b\u6848\u4f8b\u3002<\/p>\n
<section class=\"card\" style=\"--status: success;\">\r\n  <div class=\"status\">\u5361\u7247\u6210\u529f<\/div>\r\n<\/section>\r\n<section class=\"toast\" style=\"--status: success;\">\r\n  <div class=\"status\">\u63d0\u793a\u6210\u529f<\/div>\r\n<\/section><\/pre>\n
\u4ee5\u4e0a\u4e24\u4e2a<section><\/code>\u5143\u7d20\u8bbe\u7f6e\u7684\u53d8\u91cf\u662f\u4e00\u6837\u7684\uff0c\u5b50\u5143\u7d20\u4e5f\u662f\u4e00\u6837\u7684\uff0c\u6b64\u65f6\u60f3\u8981\u6709\u6240\u533a\u522b\uff0c\u5c31\u9700\u8981\u4f7f\u7528container-name<\/code>\u5c5e\u6027\uff0cCSS\u4ee3\u7801\u53c2\u8003\uff1a<\/p>\n
.card {\r\n  container-name: card;   \r\n}\r\n.toast {\r\n  container-name: toast;    \r\n}\r\n@container card style(--status: success) {\r\n  .status {\r\n    background-color: green;\r\n  }\r\n}\r\n@container toast style(--status: success) {\r\n  .status {\r\n    background-color: #000;\r\n    &::after {\r\n      content: '\u221a';\r\n      margin-left: .5ch;\r\n    }\r\n  }\r\n}<\/pre>\n
\u6b64\u65f6\uff0c\u5c31\u6709\u5982\u4e0b\u622a\u56fe\u6240\u793a\u7684\u6e32\u67d3\u6548\u679c\uff1a<\/p>\n
\"\u4e0d\u540c\u540d\u79f0\u7684\u5bb9\u5668\u67e5\u8be2\"<\/p>\n
\u540c\u6837\u7684\uff0c\u4e5f\u6f14\u793a\u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aCSS\u5bb9\u5668\u540d\u79f0\u7cbe\u786e\u5339\u914d\u6837\u5f0f\u67e5\u8be2demo<\/a><\/p>\n
\u4e8c\u3001\u518d\u770b\u4e0b\u8303\u56f4\u89e3\u6790\u8bed\u6cd5<\/h3>\n
\u5355\u7eaf\u7684CSS\u53d8\u91cf\u5339\u914d\u5e76\u4e0d\u80fd\u8ba9\u5f00\u53d1\u4eba\u5458\u5174\u594b\uff0c\u56e0\u4e3a\uff0c\u901a\u8fc7\u5c5e\u6027\u9009\u62e9\u5668\uff0c\u67d0\u79cd\u610f\u4e49\u4e0a\u4e5f\u662f\u53ef\u4ee5\u5bf9CSS\u53d8\u91cf\u8fdb\u884c\u5339\u914d\u7684\uff0c\u4f8b\u5982\uff1a<\/p>\n
.toast[style*=\"--status: success\"] {\r\n  \/* \u5b50\u5143\u7d20\u5df4\u62c9\u5df4\u62c9\u2026\u2026 *\/\r\n}<\/pre>\n
\u4f46\u662f\uff0c\u4e0b\u9762\u8fd9\u4e2a\u8303\u56f4\u89e3\u6790\u8bed\u6cd5\uff0c\u4e00\u5b9a\u4f1a\u8ba9\u4f60\u53cc\u773c\u653e\u5149\u3002<\/p>\n
\u4e3e\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\uff0c\u4e0d\u540c\u7684\u5206\u6570\u663e\u793a\u4e0d\u540c\u7684\u989c\u8272\u3002<\/p>\n
90\u5206\u4ee5\u4e0a\u662f\u91d1\u8272\uff0c\u91d1\u8272\u4f20\u8bf4\u3002
\n80\u5206\u4ee5\u4e0a\u662f\u7eff\u8272\uff0c60~80\u6a59\u8272\uff0c60\u5206\u4ee5\u4e0b\u662f\u7ea2\u8272\u3002<\/p>\n
\u5219\u65e0\u9700JS\u5224\u65ad\uff0cCSS\u5c31\u80fd\u5904\u7406\u3002<\/p>\n
HTML\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
<span class=\"score\" style=\"--score: 95;\">\r\n  <data>95<\/data>\r\n<\/span>\r\n<span class=\"score\" style=\"--score: 85;\">\r\n  <data>85<\/data>\r\n<\/span>\r\n<span class=\"score\" style=\"--score: 65;\">\r\n  <data>65<\/data>\r\n<\/span>\r\n<span class=\"score\" style=\"--score: 35;\">\r\n  <data>35<\/data>\r\n<\/span><\/pre>\n
\u6b64\u65f6\uff0c\u5c31\u53ef\u4ee5\u5728style()<\/code>\u51fd\u6570\u4e2d\uff0c\u4f7f\u7528\u5927\u4e8e\u53f7\uff0c\u5c0f\u4e8e\u53f7\u8fdb\u884c\u5339\u914d\uff0c\u4ee3\u7801\u6765\u54af\uff1a<\/p>\n
@container style(--score >= 90) {\r\n  data {\r\n    color: gold;\r\n  }\r\n}\r\n@container style(--score >= 80) and style(--score < 90) {\r\n  data {\r\n    color: green;\r\n  }\r\n}\r\n@container style(--score >= 60) and style(--score < 80) {\r\n  data {\r\n    color: orange;\r\n  }\r\n}\r\n@container style(--score < 60) {\r\n  data {\r\n    color: red;\r\n  }\r\n}<\/pre>\n
\u901a\u4fd7\u6613\u61c2\uff0c\u4e09\u5c81\u5c0f\u5b69\u4e5f\u80fd\u77e5\u9053\u662f\u4ec0\u4e48\u610f\u601d\u3002<\/p>\n
\u6548\u679c\u56fe\u53c2\u8003\uff1a<\/p>\n
\"\u6570\u5b57\uff0c\u91d1\u8272\u4f20\u8bf4\"<\/p>\n
\u540c\u6837\u7684\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u4e5f\u6709\u6f14\u793a\u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aCSS\u6837\u5f0f\u67e5\u8be2range\u8303\u56f4\u5339\u914d\u5206\u6570\u989c\u8272demo<\/a><\/p>\n
\u56db\u3001\u5176\u5b9e\u4f7f\u7528\u666e\u901a\u5c5e\u6027\u4e5f\u662f\u53ef\u4ee5\u7684<\/h3>\n
Chrome\u6d4f\u89c8\u5668\u5df2\u7ecf\u652f\u6301\u5168\u5c5e\u6027attr()\u51fd\u6570\u8bed\u6cd5<\/a>\u4e86\uff0c\u6240\u4ee5\uff0c\u6837\u5f0f\u5339\u914d\u7684\u65f6\u5019\uff0c\u666e\u901a\u5c5e\u6027\u4e5f\u662f\u53ef\u4ee5\u652f\u6301\u7684\u3002<\/p>\n
\u4f8b\u5982\uff1a<\/p>\n
<span class=\"score\" data-score=\"95\">\r\n  <data>95<\/data>\r\n<\/section>\r\n<span class=\"score\" data-score=\"85\">\r\n  <data>85<\/data>\r\n<\/section>\r\n<span class=\"score\" data-score=\"65\">\r\n  <data>65<\/data>\r\n<\/section>\r\n<span class=\"score\" data-score=\"35\">\r\n  <data>35<\/data>\r\n<\/section><\/pre>\n
.score {\r\n  --score: attr(data-score type(<number>));\r\n}\r\n@container style(--score >= 90) {\r\n  data {\r\n    color: gold;\r\n  }\r\n}\r\n\/* \u8fd9\u90e8\u5206\u4ee3\u7801\u90fd\u662f\u4e00\u6837\u7684\uff0c\u7565 *\/<\/pre>\n
\u6700\u7ec8\u7684\u6548\u679c\u6548\u679c\u662f\u4e00\u6837\u7684\uff1a<\/p>\n
\"\u6570\u5b57\uff0c\u91d1\u8272\u4f20\u8bf4\"<\/p>\n
\u4e94\u3001\u6211\u60f3\u5339\u914d\u5bb9\u5668\u81ea\u8eab<\/h3>\n
\u53ea\u8981\u662f@container\u5bb9\u5668\u5339\u914d\uff0c\u65e0\u8bba\u662f\u5c3a\u5bf8\u67e5\u8be2<\/a>\u3001\u6837\u5f0f\u67e5\u8be2\u3001\u6eda\u52a8\u67e5\u8be2<\/a>\u8fd8\u662f\u951a\u70b9\u67e5\u8be2<\/a>\uff0c\u90fd\u662f\u53ea\u80fd\u5bf9\u540e\u4ee3\u5143\u7d20\u8fdb\u884c\u8bbe\u7f6e\uff0c\u5bb9\u5668\u672c\u8eab\u662f\u65e0\u6cd5\u76f4\u63a5\u5339\u914d\u3002<\/p>\n
\u4f46\u662f\uff0c\u5bf9\u4e8e\u6837\u5f0f\u67e5\u8be2\u800c\u8a00\uff0c\u662f\u6709\u66f2\u7ebf\u6551\u56fd\u7684\u65b9\u6848\u7684\uff0c\u90a3\u5c31\u662f\u4f7f\u7528 if()<\/code> \u51fd\u6570\u3002<\/p>\n
\u6240\u4ee5\uff0c\u4e0a\u9762\u7684\u5206\u6570\u9ad8\u4eae\u6848\u4f8b\uff0cHTML\u4ee3\u7801\u53ef\u4ee5\u8fdb\u4e00\u6b65\u7b80\u5316\uff1a<\/p>\n
<data class=\"score\" value=\"95\"><\/data>\r\n<data class=\"score\" value=\"85\"><\/data>\r\n<data class=\"score\" value=\"65\"><\/data>\r\n<data class=\"score\" value=\"35\"><\/data><\/pre>\n
\u66f4\u8bed\u4e49\uff0c\u66f4\u539f\u751f\uff0c\u66f4\u7b80\u6d01\u3002<\/p>\n
CSS\u4ee3\u7801\u540c\u6837\u7b80\u5355\u4e86\u5f88\u591a\uff1a<\/p>\n
.score {\r\n  --score: attr(value type(<number>));\r\n  &::before {\r\n    content: attr(value);\r\n  }\r\n  color: if(\r\n    style(--score >= 90): gold;\r\n    style(--score >= 80): green;\r\n    style(--score >= 60): orange;\r\n    else: red;\r\n  );\r\n}<\/pre>\n
\u8fd8\u662f\u76f8\u5f53nice\u7684\uff01<\/p>\n
\"if\u51fd\u6570\u5b9e\u73b0\u7684\u6570\u5b57\u989c\u8272\"<\/p>\n
\u5982\u679c\u60a8\u6b63\u5728\u4f7f\u7528\u7684\u662fChrome\u6d4f\u89c8\u5668\uff0c\u90a3\u4e48\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1aCSS\u6837\u5f0f\u67e5\u8be2if()\u51fd\u6570\u5339\u914d\u5bb9\u5668\u81ea\u8eab<\/a><\/p>\n
\u516d\u3001\u6837\u5f0f\u67e5\u8be2\u4e5f\u652f\u6301\u5c3a\u5bf8\u8bbe\u7f6e<\/h3>\n
style()<\/code>\u51fd\u6570\u91cc\u9762\u4e5f\u53ef\u4ee5\u8bbe\u7f6emin-width<\/code>\uff0c\u6216\u8005height<\/code>\u7b49\u5c3a\u5bf8\u8bbe\u7f6e\u3002<\/p>\n
\u4f8b\u5982\uff1a<\/p>\n
@container style(min-width: 200px) { \u2026 }<\/pre>\n
\u7531\u4e8e@container<\/code>\u672c\u8eab\u5c31\u652f\u6301\u5c3a\u5bf8\u67e5\u8be2\uff0c\u6545\u800c\u8fd9\u4e2a\u4e0d\u53ef\u66ff\u4ee3\u6027\u4e00\u822c\uff0c\u5176\u5178\u578b\u5e94\u7528\u8fd8\u662fCSS\u53d8\u91cf\u5339\u914d\u3002<\/p>\n
\u54e6\u5475\u5475~<\/p>\n
\u4e03\u30012025\u5e74\u5c31\u8fd9\u6837\u7ed3\u675f\u5566<\/h3>\n
2025\u5e74\u5c31\u8fd9\u6837\u7ed3\u675f\u5566\uff0c\u8fd9\u4e00\u5e74\u524d\u7aef\u4f9d\u7136\u5728\u4e0d\u65ad\u8fdb\u6b65\uff0c\u5982\u679c\u5927\u5bb6\u6ce8\u610f\u770b\u6211\u7684\u66f4\u65b0\u7684\u65b0\u7279\u6027\uff0c7~8\u6210\u90fd\u662fCSS\u65b0\u7279\u6027\uff0c\u5012\u4e0d\u662f\u6211\u523b\u610f\u7b5b\u9009\uff0c\u771f\u7279\u4e48\u5c31\u662fCSS\u7279\u6027\u6bd4DOM\u548cJS\u7279\u6027\u591a\u3002<\/p>\n
2024\u5e74\u5e74\u5e95\u7684\u65f6\u5019\uff0c\u7edd\u5bf9\u60f3\u4e0d\u5230CSS\u4f1a\u6709\u4e0a\u9762\u8fd9\u6837\u7684\u5199\u6cd5\u3002<\/p>\n
\u8981\u662f\u8fd9\u4e00\u5e74\u4e0d\u8ddf\u7740\u5b66\u4e60\u3002<\/p>\n
CSS\u5c31\u4f1a\u53d8\u6210\u4f60\u4e0d\u8ba4\u8bc6\u7684\u6837\u5b50\u3002<\/p>\n
\u76f8\u6bd4\u4e4b\u4e0b\uff0cJavaScript\u8fd8\u662f\u5f53\u5e74\u7684\u6837\u5b50\uff0c\u6ee1\u5c4f\u7684Promise\uff0casync\u548cawait\u548c\u7bad\u5934\u51fd\u6570\uff0c\u5176\u4ed6\u5927\u540c\u5c0f\u5f02\u3002<\/p>\n
CSS\u5219\u662f\u4ece\u4e66\u5199\u5230\u7279\u6027\u90fd\u5927\u53d8\u6837\u4e86\u3002<\/p>\n
\u5c55\u671b2026\uff0c\u65b0\u7684\u4e00\u5e74\uff0c\u8fd8\u662f\u8981\u6301\u7eed\u5b66\u4e60\u7684\u5566\uff0c\u52a0\u6cb9\uff01<\/p>\n
\"\u52a0\u6cb9\uff01\"<\/p>\n
\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002
\n\u672c\u6587\u5730\u5740\uff1ahttps:\/\/www.zhangxinxu.com\/wordpress\/?p=11975<\/a><\/p>\n
\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"
\"style()\u6837\u5f0f\u67e5\u8be2\u8bed\u6cd5\"<\/p>\n
CSS\u5bb9\u5668\u67e5\u8be2\uff0c\u7ee7\u5c3a\u5bf8\u67e5\u8be2\u3001\u6eda\u52a8\u67e5\u8be2\u3001\u951a\u70b9\u67e5\u8be2\u540e\uff0c\u8fd8\u652f\u6301\u6837\u5f0f\u67e5\u8be2\uff0c\u76f4\u63a5\u5339\u914dCSS\u53d8\u91cf\uff0c\u66f4\u5173\u952e\u7684\u662f\uff0c\u548cattr()\u3001if()\u7b49\u51fd\u6570\u914d\u5408\u4f7f\u7528\u540e\uff0c\u573a\u666f\u9002\u5e94\u6027\u66f4\u662f\u76f4\u7ebf\u6500\u5347\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1861,2072,1518,1863,365,1591,2093,2076,575,97],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/11975"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=11975"}],"version-history":[{"count":9,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/11975\/revisions"}],"predecessor-version":[{"id":12025,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/11975\/revisions\/12025"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=11975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=11975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=11975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}