如何用CSS在.room-code获焦时同时修改自身与.new-task的宽度？

要实现.room-code获取焦点时同步修改.new-task宽度的效果，核心是匹配两个div的HTML结构选择对应CSS规则，你之前的写法失效大概率是因为结构和选择器规则不兼容，以下分两种场景给出可行方案：

场景1：.new-task 在 .room-code 之前（同级） #

如果你的HTML结构是类似这样：

<div class="new-task"></div>
<div class="room-code"></div>

CSS没有原生前向选择器，可借助父容器的:focus-within状态实现：

1. 给两个div添加共同父容器：

<div class="task-container">
  <div class="new-task"></div>
  <div class="room-code"></div>
</div>

2. 新增CSS规则：

.task-container:focus-within .new-task {
  width: 90px;
  transition: width 0.5s;
}

原理：当容器内的.room-code获得焦点时，父容器会触发:focus-within状态，此时即可选中容器内的.new-task。

场景2：.room-code 在 .new-task 之前（同级） #

如果HTML结构是：

<div class="room-code"></div>
<div class="new-task"></div>

直接用**通用兄弟选择器~**即可（若两元素相邻，用+也可行）：

.room-code:focus ~ .new-task {
  width: 90px;
  transition: width 0.5s;
}

你原代码中此写法失效，大概率是因为.new-task不在.room-code的同级后方，或两元素层级不同。

关键注意事项 #

• 确保两个div处于同一父元素下的同级层级，否则兄弟选择器和父容器:focus-within都无法生效；
• 若.room-code是普通div（非表单元素），需添加tabindex="0"让它能获取焦点：

.room-code {
  /* 原有样式 */
  tabindex: 0;
  outline: none; /* 可选，移除默认焦点边框 */
}

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