我有一个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;
}
但我只需要这个规则,如果文本框有焦点。我应该如何附加这个规则呢?
1条答案
按热度按时间9gm1akwq1#
将所有要求放入同一个
has
函数中:x一个一个一个一个x一个一个二个x