React中实现父容器子元素≥2时显示指定Div的问题

方法一：纯CSS（依赖:has()选择器，现代浏览器支持） #

你的原CSS选择器逻辑存在局限，更可靠的写法是用:has()直接判断父容器是否包含至少2个div子元素：

/* 默认隐藏操作栏 */
.parentContainer .myActionDiv {
  display: none;
}

/* 当父容器存在至少2个div子元素时，显示操作栏 */
.parentContainer:has(div:nth-of-type(2)) .myActionDiv {
  display: block;
}

:has()选择器目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果你的项目兼容这些浏览器，这个方案最简洁。

方法二：React逻辑控制（兼容所有浏览器） #

如果需要兼容旧浏览器，直接在组件内通过逻辑判断是否渲染操作div是更稳妥的方式：

场景1：内容子div从数组渲染

import styles from './YourComponent.module.css';

function YourComponent() {
  // 动态内容项
  const contentItems = [/* 你的内容数据 */];

  return (
    <div className={styles.parentContainer}>
      {contentItems.map((item, index) => (
        <div key={index}>{item.content}</div>
      ))}
      {/* 内容项数量≥2时渲染操作div */}
      {contentItems.length >= 2 && (
        <div className={styles.myActionDiv}>MY ACTION DIV</div>
      )}
    </div>
  );
}

场景2：内容子div为分散的条件渲染

import { useEffect, useState, useRef } from 'react';
import styles from './YourComponent.module.css';

function YourComponent() {
  const parentRef = useRef(null);
  const [showActionDiv, setShowActionDiv] = useState(false);

  useEffect(() => {
    if (parentRef.current) {
      // 统计父容器内的div子元素总数
      const totalDivs = parentRef.current.querySelectorAll('div').length;
      // 根据需求调整判断逻辑：示例中操作div算子div，所以总数≥3时显示
      setShowActionDiv(totalDivs >= 3);
    }
  }, [/* 依赖项：内容子div的渲染条件变量 */]);

  return (
    <div className={styles.parentContainer} ref={parentRef}>
      {/* 条件渲染的内容div */}
      {condition1 && <div>some info</div>}
      {condition2 && <div>some other info</div>}
      {/* 根据状态显示操作div */}
      {showActionDiv && (
        <div className={styles.myActionDiv}>MY ACTION DIV</div>
      )}
    </div>
  );
}

原CSS不生效的原因 #

你写的div:nth-child(n+2) ~ .myActionDiv存在两个问题：

1. nth-child基于父容器所有子元素（包括非div），如果父容器存在其他非div元素，第二个子元素可能不是div，导致选择器失效。
2. 当内容div数量变化时，可能因DOM结构或CSS优先级问题，导致选择器无法正确匹配目标元素。

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