CSS 选择器问题，未正确选择焦点输入答案

【问题标题】：CSS selector issue, focused input isn't properly selectedCSS 选择器问题，未正确选择焦点输入
【发布时间】：2017-10-24 14:58:29
【问题描述】：

我被 CSS 覆盖扼杀了... 我的样本有两组输入标签，上面有标签单击第一个数字很好地切换到编辑模式。不幸的是，点击第二个数字并没有按预期工作。

div[class="number_container"]>input:focus+label {
  display: none
}

.number_container {
  position: relative;
}

.number_content {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 22px;
  width: 148px;
  text-align: center;
  background: white;
}

<body>
  <div class="number_container">
    <input id="1" name="1" style="width: 150px;" type="number" value="100000">
    <label class="number_content" for="1">$1,000,014</label>
  </div>

  <br/>
  <br/>
  <div class="number_container">
    <input id="2" name="2" style="width: 150px;" type="number" value="200000">
    <label class="number_content" for="1">$2,000,014</label>
  </div>
</body>

似乎 CSS 选择器以某种方式选择了第一个 div 元素不过它适用于 Tab 键

非常感谢任何帮助

【问题讨论】：

标签： html css

【解决方案1】：

问题是关于你提到for="1" 当你关注第二个输入时自动引用第一个输入。所以将其更改为"2" 将解决问题。检查下面的 sn-p 以供参考。

div[class="number_container"]>input:focus+.number_content {
  display: none
}

.number_container {
  position: relative;
}

.number_content {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 22px;
  width: 148px;
  text-align: center;
  background: white;
}

<body>
  <div class="number_container">
    <input id="1" name="1" style="width: 150px;" type="number" value="100000">
    <label class="number_content" for="1">$1,000,014</label>
  </div>

  <br/>
  <br/>
  <div class="number_container">
    <input id="2" name="2" style="width: 150px;" type="number" value="200000">
    <label class="number_content" for="2">$2,000,014</label>
  </div>
</body>

【讨论】：

【解决方案2】：

尝试将第二个标签的“for”更改为“2”，使其与第二个输入匹配

【讨论】：