CSS 重点 last-child

Question

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

  <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> 我在下面添加了代码，但其中 none 有效

    .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;
    }

Answer 1

我认为缺少一些 CSS 代码来改进答案。但是，尽管缺少 CSS 代码，这应该可以工作：

i:last-child

使用它您可以 select <i> 标签的最后一个子标签。现在，如果您想更改 CSS 属性，请在 CSS:

i:last-child {
    background: #ff0000;
}

Answer 2

+ 将定位下一个直接同级元素。如果要查找所有兄弟元素，请使用 ~ 而不是 +.

   .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 重点 last-child

CSS focus last-child

css

focus

css-selectors

twitter-bootstrap-3