如何拆分父元素类名并将拆分值分配给子元素？

针对你这个需求，我推荐用JavaScript来处理——毕竟CSS没法动态根据父元素的class拆分数值并对应到子元素上。下面是几个实用的方案，从原生无依赖到框架场景都覆盖：

这个方案不需要任何框架依赖，兼容性好，适合大多数场景：

// 1. 获取所有符合条件的父元素（这里匹配class以block-开头的元素，可根据实际调整）
const parentBlocks = document.querySelectorAll('[class^="block-"]');

// 2. 遍历每个父元素处理
parentBlocks.forEach(parent => {
  // 拆分父元素的class名称，提取所有数值部分
  const classSegments = parent.className.split('-');
  const percentageValues = classSegments.filter(segment => {
    // 确保是有效数字
    const num = parseInt(segment, 10);
    return !isNaN(num) && num >= 0 && num <= 100;
  });

  // 3. 获取父元素下的目标子元素（这里假设是带.card类的元素，可替换成其他选择器）
  const childCards = parent.querySelectorAll('.card');

  // 4. 给每个子元素分配对应的数值class
  childCards.forEach((card, index) => {
    // 处理子元素数量多于数值的情况：用最后一个数值兜底
    const targetValue = percentageValues[index] || percentageValues.at(-1);
    if (!targetValue) return; // 如果没有有效数值，跳过

    // 可选：先移除子元素上旧的block__col--*类，避免重复
    const oldColClass = Array.from(card.classList).find(c => c.startsWith('block__col--'));
    if (oldColClass) card.classList.remove(oldColClass);

    // 添加新的数值类
    card.classList.add(`block__col--${targetValue}`);
  });
});

方案优势： #

• 无任何外部依赖，直接在浏览器环境运行
• 自动处理子元素数量与数值数量不匹配的情况（子元素多就用最后一个数值，数值多就忽略多余的）
• 可以灵活调整父元素、子元素的选择器，适配不同的HTML结构

如果你的页面是用React构建的，可借助useEffect钩子在组件挂载/更新时处理：

import { useEffect, useRef } from 'react';

// 封装一个可复用的Block组件
const Block = ({ className, children }) => {
  const blockRef = useRef(null);

  useEffect(() => {
    if (!blockRef.current || !className) return;

    // 提取class中的数值，逻辑和原生JS一致
    const classSegments = className.split('-');
    const percentageValues = classSegments.filter(segment => {
      const num = parseInt(segment, 10);
      return !isNaN(num) && num >= 0 && num <= 100;
    });

    const childCards = blockRef.current.querySelectorAll('.card');
    childCards.forEach((card, index) => {
      const targetValue = percentageValues[index] || percentageValues.at(-1);
      if (!targetValue) return;

      const oldColClass = Array.from(card.classList).find(c => c.startsWith('block__col--'));
      if (oldColClass) card.classList.remove(oldColClass);
      card.classList.add(`block__col--${targetValue}`);
    });
  }, [className]); // 当className变化时重新处理

  return (
    <div ref={blockRef} className={className}>
      {children}
    </div>
  );
};

// 使用示例
export default function App() {
  return (
    <div>
      <Block className="block-33-33-33-33">
        <div className="card"></div>
        <div className="card"></div>
        <div className="card"></div>
        <div className="card"></div>
      </Block>
      <Block className="block-50-50">
        <div className="card"></div>
        <div className="card"></div>
      </Block>
    </div>
  );
}

补充说明： #

如果你的子元素是React组件而非原生DOM元素，可以通过传递props的方式把数值传过去，比如给子组件传递widthPercentage属性，这样比操作class更符合React的数据流理念。

• 如果父元素的class里夹杂非数字内容（比如block-33-blue-50），代码会自动过滤掉非数字部分，只提取33和50
• 如果父元素没有有效数值，代码会跳过处理，不会给子元素添加错误的class
• 如果需要支持更复杂的class命名规则（比如数值带小数block-25.5-74.5），可以把parseInt改成parseFloat，并调整数字校验逻辑

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