display: contents与树形结构伪类不兼容是否为有意设计？

这种情况是CSS规范的有意设计，核心原因在于DOM结构与布局/无障碍树的分离：

• display: contents的作用是让元素从视觉布局树和无障碍访问树中移除，使它的子元素看起来像直接属于祖父容器。但这个元素本身并没有从DOM树中删除，它依然是DOM层级中的一个节点。
• 树形结构伪类（比如:last-child、:nth-child）的匹配逻辑完全基于原始DOM树的层级关系，不会考虑display属性带来的布局层级变化。规范明确这类伪类针对的是DOM结构里的包含性同级元素，而非布局渲染后的同级元素。

针对你的场景 #

在你的代码结构中：

<Accordion>
  <form style={{ display: contents }}>
    <Accordion.Section />
    <Accordion.Section />
  </form>
  <Accordion.Section />
</Accordion>

DOM层级里，前两个Accordion.Section是form的子元素，第三个是Accordion的直接子元素。所以：

• 如果你用Accordion > :last-child，只会匹配第三个Accordion.Section；
• 如果你用form > :last-child，只会匹配form里的第二个Accordion.Section。

解决方案 #

1. 调整DOM结构（推荐）：如果业务允许，直接将form内的Accordion.Section移到Accordion下，去掉不必要的嵌套：

   <Accordion>
     <form style={{ display: contents }}></form>
     <Accordion.Section />
     <Accordion.Section />
     <Accordion.Section />
   </Accordion>
   

   这样form仅保留表单功能，所有Accordion.Section都是Accordion的直接子元素，:last-child可以正常匹配最后一个。

2. 使用CSS选择器兼容：如果无法调整DOM，可以用:is()选择器合并匹配范围，选中所有Accordion下的Accordion.Section并取最后一个：

   Accordion :is(form[style*="display: contents"] > Accordion.Section, Accordion.Section):last-of-type {
     /* 你的样式 */
   }
   

   注意：这种方式需要确保目标浏览器支持:is()语法。

3. JavaScript辅助：通过JS获取Accordion下所有的Accordion.Section节点（包括form内的），然后给最后一个添加样式类：

   const accordionSections = document.querySelectorAll('Accordion Accordion.Section');
   if (accordionSections.length > 0) {
     accordionSections[accordionSections.length - 1].classList.add('last-section');
   }
   

内容的提问来源于stack exchange，提问作者iambryanhaney