如何用:has选择器实现含嵌套div的输入框聚焦时标签变色

初始场景（无嵌套div） #

初始HTML结构：

<kendo-label>
  <label class="k-label"></label>
</kendo-label>
<kendo-textbox class="k-input-solid"></kendo-textbox>

此时使用以下CSS选择器可实现输入框聚焦时标签变色：

kendo-label:has(+ .k-input-solid:focus-within) .k-label {
  color: var(--blue-05);
  font-weight: 600;
}

新增嵌套div后的问题 #

现在输入框被组件自动嵌套进div中，HTML结构变为：

<kendo-label>
  <label class="k-label"></label>
</kendo-label>
<div>
  <kendo-textbox class="k-input-solid"></kendo-textbox>
</div>

之前尝试的kendo-label:has(+ div):has(+ .k-input-solid:focus-within) .k-label无法生效，因为第二个:has(+ .k-input-solid...)是在寻找kendo-label的同级元素，但.k-input-solid现在是div的后代，并非kendo-label的同级。

正确解决方案 #

使用以下CSS选择器即可实现需求：

kendo-label:has(+ div .k-input-solid:focus-within) .k-label {
  color: var(--blue-05);
  font-weight: 600;
}

选择器逻辑说明 #

• kendo-label:has(+ div .k-input-solid:focus-within)：选中满足两个条件的kendo-label元素：
  1. 它的相邻兄弟元素是div（+ div）
  2. 该div内部存在处于:focus-within状态的.k-input-solid元素（div .k-input-solid:focus-within）
• 最后通过.k-label选中kendo-label内部的标签元素，应用样式。

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