css 选择嵌套元素:has

gxwragnw  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(167)

我有一个HTML结构如下:

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

如果我点击文本框(焦点),标签应该有不同的颜色。为此,我有这个选择器,它工作得很好:

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

现在,我有了一个新的结构,div如下所示:

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

这个div是由组件提供者插入的,所以我必须照原样接受它。
问题是,我现在怎样才能达到同样的结果呢?
我试过这个:

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

但未选择标签。
有了这个,我得到选择的标签:

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

但我只需要这个规则,如果文本框有焦点。我应该如何附加这个规则呢?

9gm1akwq

9gm1akwq1#

将所有要求放入同一个has函数中:

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

x一个一个一个一个x一个一个二个x

相关问题