聚焦不同层级元素时，如何为另一元素添加样式？

问题原因 #

你当前的CSS选择器#addComment:focus + #addCommentBtn无效，因为相邻兄弟选择器(+)只能选中同级且紧邻的元素，而textarea和button处于不同层级：

• textarea的父级链是.input-container → .form-item
• button的父级是.button-wrapper，仅和.form-item为同级关系

纯CSS解决方案（无需修改HTML结构） #

利用CSS的:focus-within伪类，它能检测容器内是否有元素处于聚焦状态。form.container是textarea和button的共同父容器，当textarea聚焦时，form会匹配:focus-within，此时就能跨层级选中内部的按钮元素。

修改后的CSS代码：

#addCommentBtn {
    display: none;
}

#addComment {
    transition: all 0.5s ease;
    margin: 0.5em;
    width: 95%;
}

#addComment:focus {
    height: 10em;
    margin-bottom: 2em;
}

/* 核心：通过父容器的:focus-within选中按钮 */
.container:focus-within .button-wrapper #addCommentBtn {
    display: block;
}

兼容性说明 #

:focus-within支持所有现代浏览器（Chrome、Firefox、Edge、Safari 10.1+），可覆盖绝大部分主流使用场景。

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