逐个 token 拆解这条 CSS 选择器与声明：从结构语义到 Flex 行为的全景图
你给出的代码是：
ab-page-layout ab-page-slot>* {
flex: 1 1 var(--cx-flex-basis, 100%);
}
这短短一行其实把三个层面的知识揉在一起：HTML 自定义元素的类型选择器与组合器、CSS Selectors 的匹配与优先级、以及 Flexbox 与 CSS 自定义属性的协作。下面逐个 token 拆开讲，并在关键处给出现代规范或权威文档的出处，最后给出可运行的案例，模拟真实页面里它会如何工作。
选择器部分的逐 token 解析
ab-page-layout
这是一个类型选择器，指向名为 ab-page-layout 的标签。名称里带连字符的标签非常像自定义元素。按照 Custom Elements 标准，自定义元素的名字必须包含连字符，以避免与原生标签冲突，这也是像 ab-page-layout、ab-page-slot 这样的名字成立的原因。MDN 明确指出注册自定义元素时，名字需要包含连字符，且小写开头；WHATWG HTML Standard 也在 valid custom element name 的定义里列出必须包含 - 的要求。(MDN Web Docs, HTML Living Standard)
空格
ab-page-layout 与后面的 ab-page-slot 之间的空格是后代组合器。它表示：匹配那些在某个 ab-page-layout 后代树中的 ab-page-slot。MDN 对后代组合器的定义是：一个或多个空白字符连在两个选择器之间时，第二个选择器匹配的元素只要是第一个选择器匹配元素的任意后代即可。(MDN Web Docs)
ab-page-slot
依然是类型选择器，匹配名为 ab-page-slot 的元素。它与上一个空格组合后，整体意思是：在任意 ab-page-layout 的后代里找到 ab-page-slot。依旧是一个典型的自定义元素命名形式，满足必须带 - 的规则。(MDN Web Docs)
>
这是子代组合器。与后代组合器不同，子代组合器要求结构层级是直接子节点关系：右侧选择器匹配的元素，必须是左侧选择器匹配元素的直接子元素。(MDN Web Docs)
*
这是通配选择器，匹配任意类型的元素。与上面的 > 联用，表示选中 ab-page-slot 的所有直接子元素，不论它们是否是自定义元素或原生元素。MDN 也指出通配选择器可以命名空间化，不过在常见 HTML 文档中直接使用 * 即可。(MDN Web Docs)
综合起来，这个复合选择器的含义是：
在整个文档中，凡是处于某个
ab-page-layout后代里的ab-page-slot，它的所有直接子元素都将应用到花括号里的样式。
关于优先级
这条选择器中包含两个类型选择器，它们各自为优先级计数里的 C 加 1，而通配选择器 * 不增加优先级。于是本选择器的优先级是 0,0,2。MDN 的优先级规则指出类型选择器会增加最低一位，通配选择器不计入优先级。(MDN Web Docs, web.dev)
声明块逐 token 解析
花括号内只有一条声明：
flex: 1 1 var(--cx-flex-basis, 100%);
这是 flex 的三值速记写法：flex-grow、flex-shrink、flex-basis 依次出现。MDN 的 flex 文档明确列出三值语法的顺序与语义。(MDN Web Docs)
1 —— flex-grow: 1
当父容器存在正的剩余空间时，当前项目可以参与等比扩展。兄弟项的 flex-grow 值越大，分到的剩余空间越多。(MDN Web Docs)
1 —— flex-shrink: 1
当父容器产生负的剩余空间（装不下）时，当前项目允许按比例收缩。如果所有兄弟都是 1，它们将均匀地一起缩小。MDN 在 Flexbox 的尺寸与比例控制文中讨论了增长与收缩因子的配比。(MDN Web Docs)
var(--cx-flex-basis, 100%) —— flex-basis
flex-basis 是主轴上的初始尺寸。它和 flex-grow、flex-shrink 一起决定分配空间前的基准大小。这里把基准写成 var(--cx-flex-basis, 100%)，意味着：
- 优先使用自定义属性
--cx-flex-basis的值； - 如果该变量未定义或无效，就使用回退值
100%。
这是var函数的标准回退机制，MDN指出var(--foo, fallback)的第二个参数是回退，且回退可以包含逗号等复杂值。自定义属性以--开头，参与层叠与继承。(MDN Web Docs)
关于 flex-basis 自身的定义，MDN 表述为设置弹性项目在主轴方向上的初始主尺寸，长度值可以是绝对长度，也可以是相对于父级弹性容器主轴尺寸的百分比；常见行内轴是水平方向时，100% 表示以容器主轴长度为基准的百分比。(MDN Web Docs)
把这些组合起来解读：
将所有被选中的元素设置为可增长也可收缩，并且初始尺寸来自
--cx-flex-basis变量；如果没定义这个变量，就当作100%。
这行样式在真实页面中的行为图景
有了上面的拆解，还需要把语义落回到布局上，才能直观看到它的威力。
前提很关键：只有当父级 ab-page-slot 自身是一个 Flex 容器时，子项的 flex 设置才会生效。也就是说，你通常会在某处写上：
ab-page-slot {
display: flex;
flex-wrap: wrap; /* 允许换行，方便做栅格 */
}
Flexbox 是一种一维布局模型，沿着主轴分配空间并在需要时换行，这些基础概念在 MDN 的 Flexbox 教程里有系统总结。(MDN Web Docs)
当 --cx-flex-basis 未定义时，flex-basis 采用回退值 100%。这意味着每个直接子项的初始主轴尺寸等于父容器主轴长度的 100%。如果开启 wrap，每个项目会独占一行；如果未开启 wrap，因为 flex-shrink: 1，它们会在同一行里被动收缩以适应容器宽度。两种策略带来的观感完全不同。
当你在某个更具体的作用域重写 --cx-flex-basis，例如设为 50%、33.333%、25%，就可以在不同断点上得到两列、三列、四列的等宽栅格，而无需去改每个子项的类名或写更多选择器。这正是自定义属性参与层叠带来的维护性优势。(MDN Web Docs)
可运行的最小示例与渐进增强
场景 A：移动端单列、平板双列、桌面三列
<!-- 结构中只要把内容放入 ab-page-slot 的直接子元素即可 -->
<ab-page-layout>
<ab-page-slot>
<article class='card'>A</article>
<article class='card'>B</article>
<article class='card'>C</article>
<article class='card'>D</article>
</ab-page-slot>
</ab-page-layout>
/* 1) 选择器与声明：应用到 ab-page-slot 的所有直接子元素 */
ab-page-layout ab-page-slot>* {
flex: 1 1 var(--cx-flex-basis, 100%);
}
/* 2) 让 ab-page-slot 成为 Flex 容器，且允许换行 */
ab-page-slot {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* 3) 基础外观，仅为可视化 */
.card { padding: 12px; border: 1px solid #ddd; }
/* 4) 断点上通过自定义属性切换列数，无需改子项的选择器 */
@media (min-width: 600px) {
ab-page-slot { --cx-flex-basis: 50%; } /* 平板两列 */
}
@media (min-width: 960px) {
ab-page-slot { --cx-flex-basis: 33.333%; } /* 桌面三列 */
}
解读要点：
-
小屏不定义变量，
flex-basis走回退100%，每项占满一行。var的回退规则保证了这一点，即便团队里暂时没人声明变量，布局也能工作。(MDN Web Docs) -
中等屏把
--cx-flex-basis设为50%，每行两项。 -
大屏把变量改为
33.333%，每行三项。 -
flex-grow: 1与gap协作时，纵向高度不固定的卡片仍能优雅填充剩余空间；flex-shrink: 1让它们在容器空间不足时能均匀收缩。(MDN Web Docs)
场景 B：同一 slot 内的卡片混合宽度
有时你想让某些卡片更宽，而其他卡片常规显示。利用自定义属性的作用域可以做到：
<ab-page-layout>
<ab-page-slot>
<article class='card featured' style='--cx-flex-basis: 100%'>头条</article>
<article class='card'>新闻 1</article>
<article class='card'>新闻 2</article>
<article class='card'>新闻 3</article>
</ab-page-slot>
</ab-page-layout>
/* 同一选择器仍然生效，优先使用元素内联设定的自定义属性 */
ab-page-layout ab-page-slot>* {
flex: 1 1 var(--cx-flex-basis, 100%);
}
ab-page-slot { display: flex; flex-wrap: wrap; gap: 12px; }
/* 默认两列 */
@media (min-width: 800px) {
ab-page-slot { --cx-flex-basis: 50%; }
}
现在，.featured 那张卡片因为在元素上局部设定了 --cx-flex-basis: 100%，所以在大屏两列栅格中，它独占一行，其余卡片仍按两列排布。这就是变量参与层叠与继承带来的细粒度控制。(MDN Web Docs)
常见误区与工程化考量
误区一：忘了把父级变成 Flex 容器
如果 ab-page-slot 没有 display: flex，那么子元素的 flex 声明不发生作用。关于 Flexbox 的容器与项目角色划分，MDN 的入门文档写得很清楚。(MDN Web Docs)
误区二：把 flex-basis 当作永远等同于 width
flex-basis 设定的是主轴上的初始尺寸。在 flex-direction: row 时它更像 width，在 column 时更像 height，而且它是参与分配的基准值，不是最终尺寸。MDN 的 flex-basis 词条强调它是初始主尺寸，后续还要经历增长或收缩的分配过程。(MDN Web Docs)
误区三：忽视百分比基准
把基准写成百分比，比如 100%、50%，是相对于父级弹性容器的主轴长度，不是相对于视口。这样配合 flex-wrap 才能自然形成栅格。MDN 对 flex-basis 的定义与取值范围给出说明。(MDN Web Docs)
误区四：试图用更高优先级覆盖，而不是调变量
这条规则的优先级只有 0,0,2，通常不高。如果你的目标只是调列宽，优先修改或覆盖 --cx-flex-basis，而不是去写更强的选择器，这样能更稳地复用现有样式结构。优先级的总体算法与最佳实践可参考 MDN 与 web.dev 的文章。(MDN Web Docs, web.dev)
代码为什么用 var(--cx-flex-basis, 100%) 而不是直接写一个数值
这属于一种很实用的设计：把布局的一个可调参数外置为自定义属性，既享受变量的层叠与继承，又保证在没显式设定变量时能有一个合理的回退。MDN 的 var 文档明确支持在函数里写回退值；Using CSS custom properties 文档强调自定义属性是参与层叠和可继承的，可以通过不同作用域与断点精细化调整。(MDN Web Docs)
这么做还有一个工程维度的收益：主题化与白标更简单。把列宽基准抽成变量，意味着不同品牌主题或页面区域只需覆写 --cx-flex-basis，无需复制一堆选择器，也减少了与其他规则的优先级冲突。
更深入的参考：Flex 速记值与扩展规则
如果你把 flex 的三值写成 1 1 auto，那是常见的等分布局基线；MDN 说明 flex 也支持单值或两值写法，比如写成 flex: 1 在各浏览器会扩展到接近 1 1 0% 的效果，和 1 1 var(...) 的体验不同。我们这里选择三值显式写出，是为了让回退与变量机制作用在 flex-basis 这一项上。(MDN Web Docs)
小结成一句话
选择器选中
ab-page-layout的后代中，所有ab-page-slot的直接子元素；声明把这些子元素设为可增长可收缩的Flex项，并以--cx-flex-basis作为初始主尺寸，如果变量缺席就回退到100%。这套写法让你用极少代码，把单列到多列的响应式栅格能力托管给一个可层叠的自定义属性。(MDN Web Docs)
真实世界的应用侧写
在内容型站点或后台系统中，经常存在多个 slot，每个 slot 会被不同页面在运行时动态填充不同数量与类型的组件。这个选择器的可配列宽特性意味着：产品运营只需在 layout 的某个 slot 上覆写 --cx-flex-basis，比如把一个专题位从两列扩成三列，不需要改每张卡片的类名，不需要重写规则，也无需担心优先级打架。Flexbox 的一维分配模型保证了它在内容多少不确定的场景里依旧稳健，而 var 的回退保证了在主题未覆盖时也能落回单列，降级体验可控。关于 Flexbox 的这类扩展与回退策略，MDN 在基础与进阶文章里有连续性的讲解，可按需深入。(MDN Web Docs)
结语：把选择器的结构语义与弹性布局的参数化绑定在一起
这条规则通过语义化的自定义元素表达页面的结构，通过组合器精准约束作用域，再用 Flex 与自定义属性把布局的可变参数抽离出来。它把结构、行为与可配置性分层良好：
- 结构层由
ab-page-layout与ab-page-slot描述，符合自定义元素的命名规范。(HTML Living Standard) - 匹配层由后代与子代组合器限定，确保只影响
slot的直接子项。(MDN Web Docs) - 布局层由
flex三值速记控制增长、收缩与基准；参数由--cx-flex-basis暴露，并通过var的回退机制提供安全默认值。(MDN Web Docs)
当你在复杂前端体系里推广这种写法，会发现它非常利于团队协作与主题化扩展：slot 的列宽策略不再写死在选择器里，而是通过变量被页面、主题或组件就地覆写。这就是现代 CSS 构建系统里，把可变的设计决策抽象为可层叠的配置的一个小而美的范式。
标题：从选择器到 Flex：一行 CSS 如何用自定义属性驱动响应式栅格
