如何仅用CSS按含section_break类的Li划分元素并添加边框

无法修改自动生成的HTML结构，需要以类名包含section_break的<li>元素作为分组分隔符，将相邻分隔符之间（包括分隔符本身）的<li>划分为独立分组，为每个分组添加完整的独立边框。且分组数量、每组内元素数量均无法预先确定。

示例HTML结构 #

<fieldset class="multistep-fieldset">
    <li class="section_break"></li>
    <li class="background_color field-size-large"></li>          
    <li class="background_image field-size-large"></li>
    <li class="section_break_1"></li>
    <li class="main_image field-size-large"></li>
    <li class="section_break_2"></li>
    <li class="main_image field-size-large"></li>
    <li class="main_image field-size-large"></li>
</fieldset>

CSS解决方案 #

通过CSS属性选择器与兄弟选择器的组合，可以实现无需修改HTML的分组边框效果，代码如下：

/* 重置fieldset默认样式 */
.multistep-fieldset {
  border: none;
  padding: 0;
  margin: 20px 0;
}

/* 统一设置li的基础样式，添加左右边框保证分组侧边连续 */
.multistep-fieldset li {
  list-style: none;
  padding: 10px;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  margin: 0;
}

/* 每个分组的起始分隔符添加上边框，作为分组顶部 */
.multistep-fieldset [class*="section_break"] {
  border-top: 1px solid #333;
}

/* 给每个分隔符的前一个普通li添加下边框，作为上一个分组的底部 */
.multistep-fieldset li:not([class*="section_break"]) + [class*="section_break"] {
  border-bottom: 1px solid #333;
}

/* 给最后一个分隔符之后的最后一个li添加下边框，完成最后一组的底部 */
.multistep-fieldset [class*="section_break"] ~ li:not([class*="section_break"]):last-child {
  border-bottom: 1px solid #333;
}

方案说明 #

1. 使用[class*="section_break"]属性选择器精准匹配所有类名包含section_break的分隔符<li>
2. 给所有<li>统一设置左右边框，确保分组侧边的连续性
3. 每个分隔符作为分组的起始，添加上边框形成分组顶部
4. 通过相邻兄弟选择器匹配每个分隔符的前一个普通元素，添加下边框闭合上一个分组
5. 针对最后一组无后续分隔符的情况，用:last-child选择器为最后一个元素添加下边框，完成完整边框

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