按钮独立DIV用Flex排版，聚焦显元素能否纯CSS实现？

我之前用CSS :has()伪类实现了按钮聚焦时显示对应元素的功能，原有代码如下。现在想把每个按钮放到独立的div中，通过Flex布局让它们均匀适配流式背景，但不确定调整结构后，仅用CSS能不能维持原来的按钮聚焦触发元素显示的效果，还是必须引入JavaScript？

原有实现代码 #

CSS #

#desc {
    visibility: hidden;
    opacity: 0;
}

.exp-container > .buttons:has(.button:focus) + #desc {
    opacity: 1;
    transition: 0.5s;
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .top > h1:before {
    visibility: visible;
    transition: 0.5s;
    content: "Graphic Design Lead";
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .top > .date:before {
    visibility: visible;
    transition: 0.5s;
    content: "July 2021 - July 2022";
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .content > .exp::before {
    visibility: visible;
    transition: 0.5s;
    content: "- Developing screens and UI components for the web application using React and Tailwind. - Fixing UI issues and integrating backend APIs with Redux Saga.";
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .content > .comp::before {
    visibility: visible;
    transition: 0.5s;
    content: "Remote";
}

HTML #

<div class="exp-container">
    <div class="title">
        EXPERIENCE
    </div>

    <div class="buttons">
        <button class="button" id="OMI"><span>ONE</span></button>
        <button class="button" id="RC"><span>TWO</span></button>
        <button class="button" id="MRKT"><span>THREE</span></button>
        <button class="button" id="BIBLE"><span>FOUR</span></button>
        <button class="button" id="FREE"><span>FIVE</span></button>
        <button class="button" id="CHAR"><span>SIX</span></button>
    </div>

    <div id="desc">
        <div class="top">
            <h1>Placeholder Text <span class="date">Month 2022 - Month 2022</span></h1>
        </div>

        <div class="content">
            <div class="comp">Placeholder Text</div>
            <div class="exp">Placeholder Text<br>Placeholder Text<br>Placeholder Text</div>
        </div>
    </div>
</div>

解决方案：纯CSS即可实现，无需JavaScript #

完全可以只用CSS维持原有功能，核心还是利用:has()伪类的祖先选择能力，只需要调整HTML结构和对应的CSS选择器层级。

调整步骤 #

• 重构HTML结构：把原来的.buttons容器替换成一个Flex父容器，每个按钮单独放在一个div中，方便Flex布局控制。
• 修改CSS选择器：将原来针对.buttons的:has()选择器，改成针对新的Flex父容器，确保兄弟选择器+ #desc的逻辑依然有效。
• 添加Flex布局样式：给新的父容器设置Flex属性，实现按钮均匀适配流式背景。

调整后的完整代码 #

HTML

<div class="exp-container">
    <div class="title">
        EXPERIENCE
    </div>

    <!-- 新的Flex父容器，包裹每个独立按钮的div -->
    <div class="button-flex">
        <div class="button-item">
            <button class="button" id="OMI"><span>ONE</span></button>
        </div>
        <div class="button-item">
            <button class="button" id="RC"><span>TWO</span></button>
        </div>
        <div class="button-item">
            <button class="button" id="MRKT"><span>THREE</span></button>
        </div>
        <div class="button-item">
            <button class="button" id="BIBLE"><span>FOUR</span></button>
        </div>
        <div class="button-item">
            <button class="button" id="FREE"><span>FIVE</span></button>
        </div>
        <div class="button-item">
            <button class="button" id="CHAR"><span>SIX</span></button>
        </div>
    </div>

    <div id="desc">
        <div class="top">
            <h1>Placeholder Text <span class="date">Month 2022 - Month 2022</span></h1>
        </div>

        <div class="content">
            <div class="comp">Placeholder Text</div>
            <div class="exp">Placeholder Text<br>Placeholder Text<br>Placeholder Text</div>
        </div>
    </div>
</div>

CSS

/* Flex布局样式：实现按钮均匀分布、流式适配 */
.button-flex {
    display: flex;
    gap: 1rem; /* 按钮之间的间距 */
    justify-content: space-around; /* 水平方向均匀分布 */
    flex-wrap: wrap; /* 小屏幕自动换行 */
    margin-bottom: 1rem; /* 与下方描述区的间距 */
}

#desc {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease; /* 统一过渡效果 */
}

/* 调整选择器：针对新的Flex父容器 */
.exp-container > .button-flex:has(.button:focus) + #desc {
    visibility: visible;
    opacity: 1;
}

/* 各按钮对应的内容替换逻辑，仅需修改父容器选择器即可 */
.exp-container > .button-flex:has(#OMI:focus) + #desc > .top > h1:before {
    visibility: visible;
    content: "Graphic Design Lead";
}

.exp-container > .button-flex:has(#OMI:focus) + #desc > .top > .date:before {
    visibility: visible;
    content: "July 2021 - July 2022";
}

.exp-container > .button-flex:has(#OMI:focus) + #desc > .content > .exp::before {
    visibility: visible;
    content: "- Developing screens and UI components for the web application using React and Tailwind. - Fixing UI issues and integrating backend APIs with Redux Saga.";
}

.exp-container > .button-flex:has(#OMI:focus) + #desc > .content > .comp::before {
    visibility: visible;
    content: "Remote";
}

关键说明 #

• Flex布局通过justify-content:space-around让按钮在容器内均匀分布，flex-wrap:wrap保证小屏幕下自动换行，适配流式背景需求。
• :has()伪类可以穿透多层结构，只要.button-flex是#desc的直接兄弟元素，+ #desc的兄弟选择器就能正常触发显示逻辑。
• 把过渡效果统一写在#desc的初始样式中，避免重复代码，提升可维护性。

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