gpt4 book ai didi

CSS 焦点最后一个 child

转载 作者:行者123 更新时间:2023-11-28 06:46:25 27 4
gpt4 key购买 nike

我正在使用在输入后添加标签的验证器,我想更改跨度中的最后一个标签

  <span class="input-icon">                                            
<input type="text" id="name" name="name" class="form-control" data-fv-field="name">
<i class="form-control-feedback" data-fv-icon-for="name" style="display: none;"></i>
<i class="fa fa-globe blue circular"></i>
</span>

.input-icon :last-child {
box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
}

我需要的是访问最后一个 <i>输入焦点我在下面添加了代码,但没有一个有效

    .input-icon > input:focus + .circular  {
box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;
}

.input-icon > input:focus .circular {
box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;
}

.input-icon > input:focus :last-child {
box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;
}

.input-icon > input:focus + [class*="fa-"], .input-icon > input:focus :last-child {
opacity: 1;
}

最佳答案

+ 将以下一个直接同级元素为目标。如果您想找到所有兄弟元素,请使用 ~ 而不是 +

   .input-icon > input:focus ~ .circular  {
box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;
}

.input-icon > input:focus .circular {
box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;
}

.input-icon > input:focus :last-child {
box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;
}

.input-icon > input:focus ~ [class*="fa-"], .input-icon > input:focus :last-child {
opacity: 1;
}

DEMO

关于CSS 焦点最后一个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34019393/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com